Quand utiliser les différentes méthodes d’alignement et de composition

Float

Float est le plus anciens et a beaucoup été utilisé pour toutes sortes d’alignements, maintenant son utilisation principale est de “ sortir un élément du flux et d’avoir un texte qui s’adapte à son contour ”

img{
    aspect-ratio: 1 / 1; /* force l'image carrée*/
    width: 200px; 
    border-radius: 50%; /* arondis les bords jusqu'a avaoir un rond parfait*/
    float: left;
    margin: 30px 30px 0 0; /* un peut d'espace*/
    shape-outside: margin-box; /* la magie */
}
.card{
    max-width: 600px; /* fixer une largeur à notre contenus*/
    margin: auto;  /* centrer le tout*/
}

Flex

Le cas de flex est davantage complexe, car il permet de faire beaucoup de choses. Mais, depuis l’arrivée de CSS Grid, il faut bien réfléchir à son utilisation, le plus parlant des exemples et si on a besoin de mettre des éléments sur une ligne (menu) ou de direction et de positionnement.

.spec{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;

}
nav{
    display: flex;
   
}

Grid

Comme son nom l’indique, grid est là pour les affichages de type grilles. Et aussi pour les mises en page plus complexe du type header, aside, main, footer .

avec l‘aide de Grid template area

grid-template-areas:" header header header header"
                     " aside main main main"
                     " footer footer footer footer";

et pour les grilles un simple :

display: grid;
grid-template-columns: minmax(250px, 1fr); /*au moins une largeur de 250 pixels, mais si l'espace disponible est plus grand, elles s'étireront pour remplir l'espace restant de manière équitable (1fr).*/