Alignement des éléments flex le long de l'axe principal en CSS
La propriété justify-content permet
d'aligner les éléments le long de l'axe principal. Vous avez déjà vu
les valeurs center,
space-between, space-around,
space-evenly. Étudions maintenant
quelques valeurs supplémentaires.
La valeur flex-start aligne les éléments au début de
l'axe principal, et la valeur flex-end - à la fin.
Regardons des exemples.
Exemple
Dirigeons l'axe principal de gauche à droite, en donnant
à la propriété flex-direction la valeur row.
Alignons les blocs au début de l'axe. Pour cela, réglons justify-content
sur la valeur flex-start :
.parent {
display: flex;
flex-direction: row; /* axe principal de gauche à droite */
justify-content: flex-start; /* blocs au début de l'axe principal */
}
Résultat du code :
Exemple
Alignons maintenant les blocs à la fin de l'axe.
Pour cela, réglons justify-content
sur la valeur flex-end :
.parent {
display: flex;
flex-direction: row; /* axe principal de gauche à droite */
justify-content: flex-end; /* blocs à la fin de l'axe principal */
}
Résultat du code :
Exemple
Dirigeons maintenant l'axe principal de droite à gauche,
en donnant à la propriété flex-direction la valeur
row-reverse. Alignons les blocs au début de
l'axe, c'est-à-dire au bord droit. Pour cela, réglons justify-content
sur la valeur flex-start :
.parent {
display: flex;
flex-direction: row-reverse; /* axe principal de droite à gauche */
justify-content: flex-start; /* blocs au début de l'axe principal */
}
Résultat du code :
Exemple
Et maintenant, alignons les blocs à la fin de l'axe principal,
c'est-à-dire au bord gauche. Pour cela, réglons justify-content
sur la valeur flex-end :
.parent {
display: flex;
flex-direction: row-reverse; /* axe principal de droite à gauche */
justify-content: flex-end; /* blocs à la fin de l'axe principal */
}
Résultat du code :
Exemple
Dans les exemples précédents, l'axe principal était dirigé horizontalement. Retournons-le maintenant et dirigeons-le verticalement.
Dirigeons l'axe principal vers le bas, en donnant
à la propriété flex-direction la valeur
column.
Alignons les blocs au début de l'axe principal, c'est-à-dire
au bord supérieur. Pour cela, réglons justify-content
sur la valeur flex-start :
.parent {
display: flex;
flex-direction: column; /* axe principal de haut en bas */
justify-content: flex-start; /* blocs au début de l'axe principal */
}
Résultat du code :
Exemple
Alignons maintenant les blocs à la fin de l'axe principal,
c'est-à-dire au bord inférieur. Pour cela, réglons justify-content
sur la valeur flex-end :
.parent {
display: flex;
flex-direction: column; /* axe principal de haut en bas */
justify-content: flex-end; /* blocs à la fin de l'axe principal */
}
Résultat du code :
Exemple
Retournons l'axe principal, en le dirigeant du bas
vers le haut. Pour cela, donnons à la propriété flex-direction
la valeur column-reverse. Dans
ce cas, les blocs changeront d'ordre -
au début de l'axe se trouvera le dernier bloc du code HTML.
Alignons les blocs au début de l'axe principal,
c'est-à-dire au bord inférieur. Pour cela, réglons justify-content
sur la valeur flex-start :
.parent {
display: flex;
flex-direction: column-reverse; /* axe principal de bas en haut */
justify-content: flex-start; /* blocs au début de l'axe principal */
}
Résultat du code :
Exemple
Alignons les blocs à la fin de l'axe principal,
c'est-à-dire au bord supérieur. Pour cela, réglons justify-content
sur la valeur flex-end :
.parent {
display: flex;
flex-direction: column-reverse; /* axe principal de bas en haut */
justify-content: flex-end; /* blocs à la fin de l'axe principal */
}
Résultat du code :
