Chapitre 520 | Alignement des lignes (align-content)

Alignement des lignes (`align-content`)

La propriété align-content contrôle l’alignement des lignes lorsque le conteneur Flexbox contient plusieurs lignes d’enfants (générées avec flex-wrap: wrap ou flex-wrap: wrap-reverse). Elle n’a aucun effet si les enfants sont alignés sur une seule ligne.

Valeurs que nous allons explorer :

flex-start (valeur par défaut) : Les lignes s’alignent en haut du conteneur.
flex-end : Les lignes s’alignent en bas du conteneur.
center : Les lignes sont centrées verticalement.
space-between : Les lignes sont réparties avec un espace égal entre elles.
space-around : Les lignes sont réparties avec un espace égal autour d’elles.
stretch (par défaut si la hauteur est définie) : Les lignes s’étirent pour remplir tout l’espace disponible.

Attention ! Ne pas croire que l’effet est le même !

Clarté sur la différence :

align-items agit sur les enfants d’une seule ligne. Si le conteneur Flexbox est limité à une seule ligne (par défaut avec flex-wrap: nowrap), cette propriété contrôle leur alignement sur l’axe vertical.
align-content agit sur les lignes entières, uniquement si le conteneur contient plusieurs lignes (avec flex-wrap: wrap).

Comparaison claire dans l’exemple :

align-items aurait des effets seulement sur chaque élément d’une ligne unique.
align-content montre bien ici comment les lignes multiples se répartissent verticalement dans le conteneur.

Toolbox

C’est peut être la propriété la plus ambiguë quand on ne pratique pas régulièrement et que l’on est pas confronté à des exemples concrets. Donc observez et passons à la suite ci cela vous parait trop ambiguë.