👩‍🏫 CSS, flex ou grid ?

Si vous êtes à l'aise avec la propriété CSS display et ses valeurs flex, inline-flex, grid et inline-grid, la lecture de cette doc est sans doute superflue : il s'agit d'un rappel de règles et de pratiques liées à une propriété CSS centrale pour les composants InternalGrid et Grid (avec la props displayType qui permet donc de compléter la propriété CSS display).

Dans quels cas choisir du flex

Le flex est très efficace si vous souhaitez aligner plusieurs enfants sans chercher à contraindre leurs largeurs. Il convient particulièrement pour :

• Une liste de liens (horizontale ou verticale) ;
• Occuper toute la largeur d'un conteneur avec plusieurs éléments ;
• Aligner une icône avec un texte ;
• Aligner des trucs de manière générale ;
• "Je voudrais juste que ça et ça ce soit aligné" ;
• Etc.

De manière générale, le flex est tout indiqué si vous ne connaissez pas le nombre d'enfants et que vous n'avez pas une grille précise à suivre : il est plus léger et plus simple à mettre en place.

Par ailleurs, il est utile pour obtenir une certaine responsivité : grâce au flex-wrap: wrap, il est possible d'obtenir un comportement "fluide" (les enfants reviennent à la ligne s'ils n'ont pas assez d'espace).

Dans quels cas choisir du grid

Le grid permet de disposer ses enfants sur 2 dimensions : en colonne (column) et/ou en ligne (row). Son comportement est "figé" (l'espace disponible dans le conteneur parent ou même la largeur de la page ne changeront jamais la structure de la grille, contrairement au flex).

Il convient particulièrement pour :

• Des grilles précises avec des largeurs de colonne et de lignes inégales (il vaut donc mieux connaître le nombre d'enfants) ;
• Des éléments à taille figée de manière générale :
• Faire tout ce que le flex ne parvient pas à faire.

note

Le choix du flex ou du grid est souvent une question de goûts : Fanny aime bien le grid alors qu'Olivia est fan absolue de flex, par exemple ! (et devinez qui a écrit cette doc…)