Gérer l’alignement des lignes selon l’axe secondaire : align-content

Dans certains cas, il peut arriver que le conteneur flexible soit plus grand que l’ensemble des éléments qu’il contient dans son axe secondaire et qu’il reste donc de l’espace à distribuer.

La propriété align-content va nous permettre de répartir l’espace restant selon l’axe secondaire du conteneur en plaçant cet espace avant, après ou entre les lignes.

Notez que la propriété align-content n’a aucun effet si le conteneur flexible ne possède qu’une seule ligne.

Les valeurs possibles sont :
> flex-start (éléments positionnés au début container)
> flex-end (éléments positionnés à la fin du container)
> center (position centrale)
> space-between (répartition “justifiée”, horizontale ou verticale, entre les boîtes placées aux extrémités)
> space-around (variante de répartition “justifiée”, horizontale ou verticale, elle permet un espace égal entre les boîtes)
> strech les lignes s'étirent pour remplir tout l'espace (valeur par défaut)

Vers Etape 08