Aligner les éléments sur l'axe principal
Pour changer l’alignement des éléments, on utilise l’instructionjustify-contentqui peut prendre les valeurs suivantes :
- flex-start: alignés au début (par défaut) ;
- flex-end: alignés à la fin ;
- center: alignés au centre ;
- space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;
- space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités.
Aligner les éléments sur l'axe secondaire
Si les éléments sont placés selon une direction horizontale (ligne), l’axe secondaire est vertical et réciproquement. L’instructionalign-itemsqui peut prendre les valeurs ci-dessous permet de modifier l’alignement des éléments selon un axe secondaire :
- stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
- flex-start: alignés au début ;
- flex-end: alignés à la fin ;
- center: alignés au centre ;
- baseline: alignés sur la ligne de base (semblable à flex-start).