Un guide complet sur l'alignement de la Flexbox

L'alignement est probablement l'aspect le plus déroutant de la flexbox. Le module de disposition de la flexbox possède une poignée de propriétés d’alignement qui se comportent différemment dans différentes circonstances. Lors de leur utilisation, vous ne comprenez pas nécessairement ce qui se passe ni pourquoi. Cependant, si vous savez à quoi faire attention, l'alignement est moins compliqué qu'il n'y parait. Ce tutoriel vous aidera à comprendre parfaitement l'alignement de la flexbox.

Un conte de deux haches

Lorsque nous utilisons flexbox, nous travaillons avec deux axes: le principale et traverser axes. Comme leur nom l'indique, ces axes forment une relation hiérarchique, l'axe principal étant supérieur à l'axe transversal.. 

L'axe transversal est toujours perpendiculaire à l'axe principal. 

Cette relation hiérarchique constitue la principale différence entre flexbox et CSS Grid Layout. De par sa conception, la grille CSS comporte deux axes non hiérarchiques: les axes des lignes et des colonnes. En effet, les créateurs de normes Web voulaient que la grille CSS soit utilisée comme modèle de présentation bidimensionnelle. Flexbox, en revanche, a un axe principal et un axe secondaire, son objectif étant de constituer un modèle de présentation unidimensionnel. La partie intéressante de flexbox est que vous pouvez définir la direction de cette dimension en définissant la position de l'axe principal. Par conséquent, vous pouvez créer des présentations à la fois en lignes et en colonnes..

Pour éviter toute confusion avec les propriétés d'alignement, gardez toujours à l'esprit que lorsque vous utilisez flexbox, vous travaillez avec un modèle unidimensionnel. Même si votre présentation a l'apparence de deux dimensions (lignes et colonnes), les éléments flexibles ne peuvent circuler que dans une direction, le long de l'axe principal. Vous pouvez justifier les éléments flexibles dans cette direction et aligner l'espacement entre les éléments individuels le long de l'axe transversal..

Commencez par définir l'axe principal

La direction de l'axe principal est déterminée par la propriété flex-direction. Il y a quatre valeurs possibles:

1. direction de flexion: rangée; - l'axe principal va de gauche à droite (par défaut)
   
2. direction de flexion: ligne inversée; - axe principal va de droite à gauche
3. direction de flexion: colonne; - l'axe principal va de haut en bas
4. direction de flexion: inversion de colonne; - axe principal va de bas en haut

Voyons à quoi cela ressemble dans le navigateur. Je vais utiliser un balisage HTML très simple, juste neuf cases empilées les unes sur les autres:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

La div avec le .récipient classe sera le conteneur flex et les divs internes avec le .article la classe sera les éléments flexibles.

1. De gauche à droite: rangée

Comme mentionné, la direction de flexion par défaut est rangée; si vous ne définissez rien d'autre, ce sera la valeur utilisée. Comme vous pouvez le voir ci-dessous, j'ai seulement ajouté des propriétés liées à flexbox au conteneur flex. Les objets Flex ont reçu certaines propriétés à des fins décoratives:

.conteneur display: flex; enveloppe souple: enveloppe; direction de flexion: rangée; 

Quand flex direction est rangée, l'axe principal est horizontal, de gauche à droite. C’est donc la direction dans laquelle les articles flexibles sont disposés. L'axe transversal est perpendiculaire, de haut en bas, et lorsque les éléments sont enroulés, ils le font dans cette direction..

2. De droite à gauche: ligne inverse

Quand flex-direction reçoit la valeur ligne inverse, la position des axes reste la même, ce qui signifie que l'axe principal sera toujours horizontal et l'axe transversal verticalement. Cependant, la rangée direction sera inversé: de droite à gauche le long de l'axe principal. 

.conteneur display: flex; enveloppe souple: enveloppe; direction de flexion: ligne inversée; 

Si vous regardez la numérotation des éléments flexibles, vous pouvez constater qu’à présent, chaque ligne est numérotée de droite à gauche, mais les éléments sont toujours enroulés verticalement vers le bas..

Si vous souhaitez également inverser la direction de l'axe transversal, vous devez utiliser wrap-reverse sur le flex-wrap propriété. Trouvez la différence:

3. De haut en bas: colonne

Quand le flex direction est réglé sur colonne, les axes principal et transversal changent de position. L'axe principal sera vertical (de haut en bas) et l'axe transversal horizontalement (de gauche à droite).

.conteneur display: flex; enveloppe souple: enveloppe; direction de flexion: colonne; hauteur maximale: 35rem; / * pour que les éléments enveloppent * /

Vous verrez maintenant que la numérotation des éléments flexibles ne suit pas les lignes, mais les colonnes. C’est là que la nature unidimensionnelle de la flexbox est probablement la plus visible. Les articles ne seront emballés que si le conteneur a une hauteur fixe.

4. De bas en haut: inversion de colonne

Je suppose que vous voyez un modèle se développer ici. Quand flex direction est réglé sur inversion de colonne, l'axe principal est toujours vertical et l'axe transversal est toujours horizontal, comme nous l'avons vu dans l'exemple précédent. Cependant, le sens des colonnes est inversé et l’axe principal pointe de bas en haut.. 

.conteneur display: flex; enveloppe souple: enveloppe; direction de flexion: inversion de colonne; hauteur maximale: 35rem; / * pour que les éléments enveloppent * /

Comme vous pouvez le voir ci-dessous, la numérotation des éléments flexibles commence en bas à gauche et se déplace vers le haut et la droite..

Encore une fois, pour changer la direction de l’axe transversal, vous devez utiliser wrap-reverse sur le flex-wrap propriété.

Flex-flow Sténographie

le flex-flow la propriété est un raccourci pour flex direction et flex-wrap. Par exemple, vous pouvez utiliser:

flex-flow: enroulement de colonne;

au lieu de:

direction de flexion: colonne; enveloppe souple: enveloppe;

Propriétés d'alignement de la Flexbox

L'alignement de la Flexbox peut s'effectuer le long des axes principal et transversal.

Une des propriétés (justifier le contenu) appartient à l'axe principal, les trois autres (align-items, aligner soi, aligner le contenu) appartiennent à l'axe transversal. 

Comme on pouvait s'y attendre, le comportement des propriétés d'alignement dépend de la propriété flex-direction. Par exemple, justifier le contenu aligne les éléments horizontalement si flex direction est rangée ou ligne inverse, mais verticalement si flex direction est colonne ou inversion de colonne. C'est la vraie beauté d'un flexible boîte.

Alignement le long de l'axe principal

La propriété justification-contenu aligne les éléments flex dans le conteneur flex le long de l'axe principal. Il distribue l'espace supplémentaire restant après que le navigateur a calculé l'espace nécessaire pour tous les éléments du conteneur flex. La propriété justification-content peut prendre cinq valeurs:

1. départ flexible - les éléments flexibles sont justifiés au début de l'axe principal (c'est la valeur par défaut)
   
2. extrémité flexible - les éléments flexibles sont justifiés vers la fin de l'axe principal
   
3. centre - les éléments flexibles sont justifiés autour du centre de l'axe principal
   
4. l'espace entre - les articles flexibles sont répartis uniformément le long de l'axe principal, du début flexible au flexible final
   
5. espace-autour - les articles flexibles sont répartis uniformément le long de l'axe principal, mais des espaces demi-taille sont ajoutés à chaque extrémité

Utiliser justifier le contenu correctement, vous devez faire attention aux directions de vos axes. Par exemple, le justifier-contenu: début flexible; La règle presse toujours les éléments flexibles au début de l'axe principal. C'est l'extrémité gauche quand flex-direction est rangée, la bonne fin quand c'est ligne inverse, le point le plus élevé quand il est colonne, et le point le plus bas quand il est inversion de colonne.

Le stylo suivant montre comment les différentes valeurs de justifier le contenu propriété aligner les éléments flex lorsque flex-direction est rangée.

Alignement le long de l'axe transversal

Il est temps de passer aux choses suivantes. Vous pouvez utiliser Trois Propriétés CSS pour aligner les éléments le long de l’axe transversal. Deux d'entre eux (align-items et aligner soi) sont destinés à un alignement sur une seule ligne, tandis que aligner le contenu est pour l'alignement multiligne.

Alignement sur une seule ligne

le align-items et aligner soi les propriétés définissent la répartition de l'espace entre les éléments flexibles le long de l'axe transversal. En réalité, les deux font la même chose, mais tout en align-items aligne tous les éléments à l'intérieur du conteneur flexible, aligner soi remplace cet alignement par défaut pour les éléments flexibles individuels. 

Les deux peuvent prendre les valeurs suivantes: 

1. auto - fait que la propriété align-self hérite de la valeur d'align-items (par défaut pour align-self)
   
2. départ flexible -  les articles flexibles sont alignés vers le début de l'axe transversal
   
3. extrémité flexible - les articles flexibles sont alignés vers l'extrémité de l'axe transversal
   
4. centre - les éléments flexibles sont alignés autour du centre de l'axe transversal
   
5. de base - les éléments flexibles sont alignés de telle sorte que leur alignement de base soit aligné
   
6. étendue - les éléments flexibles sont étirés le long de l'axe transversal pour remplir le conteneur flex (par défaut pour les éléments alignés)
   

Le stylo ci-dessous montre comment le align-items et aligner soi propriétés se comportent lorsque flex-direction est rangée. L'axe transversal par défaut va de haut en bas. Les articles ont des quantités différentes de rembourrage afin de changer leurs hauteurs et leurs lignes de base. Vous pouvez voir, par exemple, le départ flexible valeur aligne les éléments au début de l'axe transversal, tandis que extrémité flexible les aligne jusqu'au bout.

Naturellement, quand flex direction est colonne ou inversion de colonne, vous travaillerez avec une mise en page basée sur des colonnes de sorte que le align-items et aligner soi les propriétés aligneront les éléments horizontalement à la place.

Alignement multiligne

La propriété align-content permet un alignement multiligne le long de l'axe transversal. Il détermine comment les éléments flexibles sur plusieurs lignes sont espacés les uns des autres. La propriété align-content n'a aucun effet sur un conteneur flex sur une seule ligne (par exemple, lorsque le contenu n'est pas renvoyé à la ligne). Il peut prendre six valeurs différentes: 

1. départ flexible - les éléments flexibles sont alignés au début de l'axe transversal
   
2. extrémité flexible - les articles flexibles sont alignés à la fin de l'axe transversal
   
3. centre - les éléments flexibles sont alignés autour du centre de l'axe transversal
   
4. l'espace entre - les articles flexibles sont répartis uniformément le long de l'axe transversal, entre le début flexible et l'extrémité flexible
5. espace-autour - les articles flexibles sont répartis uniformément le long de l'axe transversal, mais des espaces demi-taille sont ajoutés à chaque extrémité
6. étendue - les éléments flexibles sont étirés le long de l'axe transversal pour remplir le conteneur flex (il s'agit du paramètre par défaut)
   

Ci-dessous, vous pouvez voir divers stylos montrant comment les différentes valeurs de aligner le contenu travaux immobiliers. Comme avec nos autres démos, les directions d'axe par défaut s'appliquent. 

Ces deux premiers exemples n’ont pas de propriété sur une seule ligne (align-items), vous remarquerez donc que tous les éléments s’étirent par défaut. Dans cet exemple, nous allons définir align-items: flex-start; de sorte que la articles aligner vers le début de l'axe transversal, mais nous allons définir align-content: extrémité flexible; de sorte que la contenu est aligné vers la fin de l'axe:

Si vous avez saisi tout ce que nous avons parcouru jusqu'à présent, vous avez très bien réussi! Vous avez maintenant une solide connaissance de base de l'alignement de la flexbox.

Conclusion

Avaient fini! Récapituler; la chose la plus importante à retenir est que vous devez garder à l’esprit les directions des axes principal et transversal. Commencez toujours votre alignement en configurant le flex direction propriété. Pour en savoir plus sur l'alignement des flexbox et mettre vos connaissances en pratique, vous pouvez également consulter les ressources suivantes:

• Documents officiels du W3C pour l'alignement de la flexbox Lourd, mais utile à lire; aussi les documents de référence pour flexbox.
• Comment aligner des éléments dans un conteneur Flex Page MDN avec des démos interactives et des exemples de code.
• Flexbox Cheatsheet par Joni Trythall Une feuille de notes en format PDF à télécharger, avec des raisins, des poires et des oranges.
  
• Flexbox Froggy Un jeu en ligne pour apprendre la flexbox, avec des grenouilles et des nénuphars. Si vous souhaitez maîtriser intuitivement l’alignement de la flexbox, essayez ce jeu (vous pouvez vous entraîner à tout ce que nous avons décrit dans ce didacticiel)..