Déclarer le modèle flexbox
Axe principal (main axis) et axe transversal (cross axis) :
L'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Il peut être horizontal ou vertical, cela dépendra de la direction.
Aussi désigné comme axe secondaire, l'axe transversal désigne le long des rangées. Cet axe est perpendiculaire à l'axe principal. Sa direction dépend de la direction de l'axe principal.
Dans le modèle flexbox, l'axe principal est défini par défaut avec la propriété flex-direction qui possède quatre valeurs :
- -
row(par défaut) : rangée - -
row-reverse: rangée inversée - -
column: colonne - -
column-reverse: colonne inversée
Cette propriété va permettre de faire pivoter l'axe principal. En utilisant la direction en colonne, on fait passer l'axe principal à la verticale. C'est seulement en utilisant l'alignement que l'on va affecter l'axe transversal. C'est très important de faire la distinction pour comprendre le concept des axes en flexbox.
Justifier le contenu (axe principal)
Aligner le contenu (axe transversal)
Justification, alignement et direction
Alignement et justification au cas par cas
L'équivalent avec la justification n'existe pas. En revanche, celle-ci peut se faire au cas par cas avec la propriété margin. Avec les marges, les éléments flexibles peuvent être centrés, espacés ou regroupés en sous-groupes.
Je vous invite à vous renseigner ici pour plus d'informations.