La propriété align-items gère l’alignement dans l’axe secondaire (cross axis).
Si l’axe principal est l’axe horizontal, la propriété align-items va donc gérer l’alignement des éléments dans l’axe vertical et inversement.
La propriété align-self permet quant à elle de régler l’alignement des éléments flexibles de manière individuelle.
Nous allons appliquer align-items au conteneur et align-self aux différents éléments flexibles. Notez que si align-items et align-self sont définies pour un élément, la valeur retenue pour l’élément flexible sera celle de align-self.
Les valeurs possibles sont :
> flex-start Les éléments flexibles vont se grouper au début de l’axe secondaire ;
> flex-end Les éléments flexibles vont se grouper à la fin de l’axe secondaire ;
> center Les éléments flexibles vont se grouper au centre de l’axe secondaire ;
> baseline généralement identique à flex-start mais les éléments vont s’aligner dans l’axe secondaire de telle manière à ce que leur ligne de base soit alignée ;
> stretch Les éléments flexibles vont s’étendre pour occuper toute la place dans l’axe secondaire du conteneur flex, valeur par défaut
> self-start Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.
> self-end Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.
A noter que la valeur par défaut de align-self est auto. L’alignement des éléments flexibles dans l’axe secondaire du conteneur est donc contrôlé par la valeur de align-items du parent de l’élément.
Testez toutes les propriétés : https://developer.mozilla.org/fr/docs/Web/CSS/align-items
Pour tester facilement et mieux comprendre :
CodePen - CSS Flexible Box Layout: align-items & align-self