Une solide compréhension de Flexbox et CSS Grid est nécessaire si vous souhaitez créer des sites Web époustouflants et réactifs.
Si vous écrivez du CSS depuis un certain temps, il y a de fortes chances que vous ayez au moins entendu parler de ces termes. Vous pourriez même avoir utilisé l'un ou les deux dans une certaine mesure. Ce sont deux parties puissantes du CSS, avec des cas d'utilisation similaires mais subtilement différents.
Qu'est-ce que Flexbox ?
Flexbox est une méthode de mise en page CSS unidimensionnelle qui existe depuis un certain temps déjà. Vous pouvez considérer Flexbox comme un ensemble de propriétés CSS associées que vous pouvez utiliser pour aligner des éléments HTML dans un conteneur et gérer l'espace entre eux.
Avant Flexbox, ce type de mise en page nécessitait une utilisation frustrante et peu maniable du flotteur et propriétés de position.
Si vous vous inquiétez de la prise en charge du navigateur par Flexbox, ne le soyez pas. Selon caniuse.com, tous les navigateurs modernes prennent en charge Flexbox.
Les bases de Flexbox
Alors que Flexbox inclut de nombreuses propriétés CSS, les bases sont assez simples. L'utilisation de Flexbox commence toujours par déclarer un conteneur parent en tant que flex-container en ajoutant affichage: flexible à ses règles de style. Faire cela rend automatiquement tous les enfants de cet élément flex-items.
Après cela, vous pouvez contrôler la distribution de l'espace dans le flex-container en utilisant le propriété Justifier-Contenu. Vous pouvez contrôler l'alignement des éléments flexibles avec le aligner les éléments propriété.
Voici un exemple de code qui utilise Flexbox pour répartir uniformément l'espace d'un conteneur entre ses enfants et les aligner tous au centre du conteneur. C'est le HTML :
<classe div="récipient">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>C'est le CSS :
.récipient {
affichage: flexible ;
largeur: 100 % ;
justifier-contenu: espace autour ;
align-items: center ;
bordure: 1 pixel noir uni ;
hauteur: 200px ;
}
.récipient > div {
hauteur: 100px ;
largeur: 100 pixels ;
couleur de fond: rouge ;
Couleur blanche;
taille de police: 5 rem ;
aligner le texte: centrer ;
rayon de bordure: 5 px ;
}
Et voici la sortie :
Qu'est-ce que la grille CSS ?
CSS Grid est un système de mise en page complémentaire à Flexbox. Flexbox est puissant, mais peu adapté à certains types de mises en page. Essayer de présenter la structure d'une page entière avec Flexbox finira par être une tâche frustrante impliquant un balisage laid et non sématique et un CSS hacky.
CSS Grid n'est pas un remplacement de Flexbox, mais plutôt un système alternatif pour certaines situations.
La prise en charge de CSS Grid n'est pas aussi étendue que celle de Flexbox, mais Grid est raisonnablement bien soutenu en 2022.
Les bases de la grille CSS
Le concept de Grille est simple. Comme son nom l'indique, CSS Grid vous permet de diviser l'espace d'un conteneur parent en une grille de lignes et de colonnes, avec le nombre de lignes/colonnes que vous souhaitez. Après cela, vous spécifiez la position des éléments enfants en référençant les lignes de la grille du parent.
Commencez par ajouter affichage: grille au conteneur parent. Utilisez ensuite le grille-modèle-lignes et grille-modèle-colonnes properties pour spécifier les lignes et les colonnes dans lesquelles vous souhaitez diviser la grille. Vous pouvez ensuite utiliser le grille-colonne et ligne de grille properties sur les éléments enfants pour leur indiquer où ils doivent se trouver dans la grille. Regardons un exemple de grille qui utilise la configuration à cinq éléments d'avant, mais dans un arrangement plus compliqué.
Voici le HTML :
<classe div="récipient">
<div>1</div>
<classe div="deux">2</div>
<classe div="trois">3</div>
<classe div="quatre">4</div>
<classe div="cinq">5</div>
</div>Voici le CSS :
.récipient {
affichage: grille ;
largeur: 100 % ;
grille-modèle-lignes: répéter (3, 1fr) ;
grille-template-columns: répéter (3, 1fr) ;
écart: 0.5rem;
bordure: 1 pixel noir uni ;
hauteur: 300px ;
}.récipient > div {
couleur de fond: rouge ;
Couleur blanche;
taille de police: 5 rem ;
aligner le texte: centrer ;
rayon de bordure: 5 px ;
}
.récipient > .deux {
ligne de grille: 2 ;
grille-colonne: 2 ;
}
Voici la sortie :
CSS Grid comprend également une bonne partie de d'autres propriétés que vous pouvez utiliser pour créer des mises en page plus complexes.
Lequel devriez-vous utiliser ?
Tout d'abord, il est important de noter que rien ne vous empêche d'utiliser Flexbox et Grid ensemble et, dans certains cas, c'est le choix optimal. Cela dit, répondons à la question de savoir quelles dispositions chacun de ces systèmes est le plus adapté à mettre en œuvre.
Flexbox est le mieux adapté à la construction de mises en page impliquant l'alignement et la distribution d'éléments sur une seule ligne. Des exemples de ce type de mise en page sont l'alignement des icônes à la fin d'une section ou la disposition des liens dans une barre de navigation.
La grille, en revanche, brille le plus lorsque vous devez positionner avec précision des éléments par rapport aux autres (à la fois horizontalement et verticalement), et vous avez besoin de ce positionnement pour vous adapter facilement aux différentes tailles d'écran.
Pour illustrer, voici le code que vous auriez besoin d'écrire pour recréer la mise en page à partir de l'exemple Grid avec Flexbox.
Le HTML :
<classe div="récipient">
<classe div="sous un">
<div>1</div>
<div>5</div>
</div><classe div="sous deux">
<div>2</div>
</div>
<classe div="sous trois">
<div>4</div>
<div>3</div>
</div>
</div>
Le CSC :
.récipient {
bordure: 1 pixel noir uni ;
hauteur: 300px ;
}.sous {
affichage: flexible ;
largeur: 100 % ;
}.un, .trois {
justifier-contenu: espace entre
}.deux {
justifier-contenu: centrer ;
}
.sous > div {
hauteur: 100px ;
largeur: 100 pixels ;
couleur de fond: rouge ;
Couleur blanche;
taille de police: 5 rem ;
aligner le texte: centrer ;
rayon de bordure: 5 px ;
}
Et voici la sortie :
La principale chose à noter ici est que bien que ce code produise la même sortie que l'exemple Grid, le balisage ici est beaucoup plus compliqué. L'implémentation de cette mise en page nécessite des sous-conteneurs et vous devez placer les divs numérotés dans le désordre dans le balisage.
De plus, supposons que vous deviez déplacer cette mise en page dans une position inconfortable: par exemple, aligner la 5e div avec la 2e. Si vous aviez utilisé Flexbox pour cela, vous auriez dû recourir à position: relative ou quelque chose de similaire. En utilisant Grid, tout ce dont vous avez besoin est de déplacer le grille-colonne propriété.
Mais, en revanche, la mise en œuvre du simple alignement sur une seule ligne de l'exemple Flexbox avec Grid entraînerait beaucoup plus de CSS. Grid est évidemment moins adapté à ce type de mise en page.
Bien que Flexbox et Grid puissent principalement reproduire les effets de l'autre, il existe quelques exceptions. Faire se chevaucher des éléments est assez difficile avec juste Flexbox mais c'est très facile avec Grid. Grid ne permet pas non plus aux éléments de s'éloigner d'autres éléments avec marge: auto comme le fait Flexbox.
Flexbox et Grid sont de puissants systèmes de mise en page
Flexbox et CSS Grid sont tous deux des systèmes de conception qui facilitent la mise en page du contenu de votre page Web. La grille est idéale pour les mises en page bidimensionnelles avec de nombreux éléments qui doivent être positionnés avec précision les uns par rapport aux autres. Flexbox est préférable pour les mises en page unidimensionnelles ou à une seule ligne où vous avez juste besoin d'espacer un tas d'éléments d'une certaine manière.
