Axes principale et transversale dans les conteneurs flex en CSS
On peut parler des flexbox en deux termes : le premier est - ligne ou colonne, le second est - en termes d'axes. Nous avons déjà traité des lignes et des colonnes, abordons maintenant les axes. Comprendre les axes est nécessaire pour aligner les éléments horizontalement ou verticalement.
Lorsqu'on travaille avec les éléments flex, il existe toujours
un axe principal et un axe transversal. Nous pouvons aligner les éléments
selon l'axe principal et perpendiculairement
à l'axe principal. L'axe principal peut avoir 4
directions : de gauche à droite, de droite à gauche,
de haut en bas et de bas en haut.
La direction de l'axe transversal dépend de la direction de l'axe principal : si l'axe principal est horizontal, alors l'axe transversal est dirigé de haut en bas, si l'axe principal est vertical, alors l'axe transversal est dirigé de gauche à droite. L'axe transversal ne peut pas avoir d'autres directions.
La direction de l'axe principal est contrôlée par la propriété
flex-direction. Si cette propriété
a la valeur row - l'axe principal est dirigé
de gauche à droite, si la valeur est row-reverse,
alors de droite à gauche. La valeur column
oriente l'axe de haut en bas, et la valeur column-reverse
- de bas en haut.
Supposons que l'axe principal soit horizontal. Dans quelle direction sera orienté l'axe transversal ?
Supposons que l'axe principal soit vertical. Dans quelle direction sera orienté l'axe transversal ?
Supposons que l'axe transversal soit orienté vers la droite. Dans quelle direction l'axe principal peut-il être orienté dans ce cas ?
Supposons que l'axe transversal soit orienté vers le bas. Dans quelle direction l'axe principal peut-il être orienté dans ce cas ?
L'axe transversal peut-il être orienté de droite à gauche ?
L'axe transversal peut-il être orienté de bas en haut ?
Supposons que la propriété flex-direction ait
la valeur row. Dans quelle direction sera orienté
l'axe principal ? Dans quelle direction sera orienté
l'axe transversal ?
Supposons que la propriété flex-direction ait
la valeur column. Dans quelle direction sera orienté
l'axe principal ? Dans quelle direction sera orienté
l'axe transversal ?
Supposons que la propriété flex-direction ait
la valeur row-reverse. Dans quelle direction sera orienté
l'axe principal ? Dans quelle direction sera orienté
l'axe transversal ?
Supposons que la propriété flex-direction ait
la valeur column-reverse. Dans quelle direction sera
orienté l'axe principal ? Dans quelle direction sera orienté
l'axe transversal ?
