Les flexbox utilisent un principe d’axes.
Cela implique qu’on va devoir définir un axe principal selon lequel nos éléments flexibles vont venir s’écouler.
En termes physiques, l’axe principal peut être soit horizontal, soit vertical.
La distribution par défaut est sur une ligne et de gauche à droite.
L’axe principal du conteneur sera donc physiquement l’axe horizontal et le début de l’axe sera gauche. Les éléments flexibles vont venir se placer selon cet axe, donc en ligne et de gauche à droite.
Celle-ci peut être modifiée grâce à la propriété flex-direction (ou flex-flow).
La propriété flex-direction permet de définir quel axe est l’axe principal du conteneur flexible et la direction du placement des éléments flexibles dans cet axe.
Si on veut des éléments alignés verticalement, on utilise une colonne (column), pour des éléments horizontaux (par défaut) on utilise une ligne (row). Nous aurons donc 2 axes appelés “Main axis”, définis par le sens de lecture, et “Cross Axis” qui est perpendiculaire au premier.
Remarque
La propriété writing-mode permet d’indiquer si les lignes de texte sont disposées horizontalement ou verticalement et la direction dans laquelle les blocs progressent.