align-content en CSS : la propriété qui n'agit que si les lignes se multiplient

align-items aligne des éléments individuels sur l'axe secondaire d'un conteneur, mais que se passe-t-il quand ces éléments se répartissent sur plusieurs lignes grâce à flex-wrap ? Une nouvelle question se pose alors : comment ces lignes elles-mêmes se positionnent-elles dans la hauteur totale du conteneur ? C'est exactement le rôle d'align-content, une propriété souvent confondue avec align-items alors qu'elle agit à un niveau différent.

On la rencontre dans des mises en page où le nombre de lignes créées par le passage à la ligne n'est jamais connu à l'avance, comme une grille de vignettes qui se réorganise selon la largeur de l'écran ou le nombre d'éléments affichés.

Définition

align-content est la propriété qui répartit les lignes d'un conteneur Flexbox sur son axe secondaire, quand ce conteneur en compte plusieurs grâce à flex-wrap: wrap. Elle ne s'applique qu'au conteneur, jamais aux enfants individuels.

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Cette déclaration répartit les lignes créées par le passage à la ligne sur toute la hauteur du conteneur, en poussant la première ligne en haut et la dernière en bas.

La différence essentielle avec align-items

La confusion entre les deux propriétés est fréquente, alors que leur niveau d'action est complètement différent.

align-items positionne un élément verticalement à l'intérieur de sa propre ligne, tandis qu'align-content positionne les lignes les unes par rapport aux autres, dans l'espace vertical total du conteneur. Les deux propriétés peuvent parfaitement cohabiter sur le même conteneur, chacune agissant à son propre niveau.

Sans plusieurs lignes, aucun effet

C'est le point le plus important à retenir : align-content reste sans le moindre effet tant que le conteneur n'affiche qu'une seule ligne d'éléments, que ce soit parce que flex-wrap vaut nowrap, ou simplement parce que tout le contenu tient déjà sur une seule ligne malgré flex-wrap: wrap.

.conteneur {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 400px;
}

Sur ce conteneur, align-content: center ne produit un effet visible que si le contenu déborde effectivement sur plusieurs lignes à l'intérieur des 400 pixels de hauteur ; sur une seule ligne, tout l'espace vertical restant est simplement ignoré par cette propriété.

Un exemple concret

Une grille de tags qui occupe une hauteur fixe, avec un nombre variable de lignes selon le nombre de tags affichés, illustre bien l'usage d'align-content.

.liste-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 200px;
  gap: 0.5rem;
}

align-content: flex-start regroupe toutes les lignes de tags en haut du conteneur, laissant l'espace vertical restant en bas, plutôt que de l'étirer entre les lignes, ce qui donnerait un aspect trop aéré à une simple liste de mots-clés.

Le piège du diagnostic

Le piège le plus courant consiste à poser align-content sur un conteneur, constater qu'il ne se passe rien, et en conclure à tort que la propriété ne fonctionne pas.

Questions fréquentes

Oui, dans un contexte de grille, align-content répartit les lignes de la grille dans la hauteur du conteneur si celles-ci occupent moins d'espace que la hauteur disponible, un principe très proche de son usage sur Flexbox.

Oui, la plupart des valeurs sont communes : flex-start, flex-end, center, space-between, space-around, et une valeur supplémentaire stretch, propre à align-content, qui étire les lignes elles-mêmes pour remplir tout l'espace vertical disponible du conteneur.

Parce qu'align-content répartit l'espace vertical restant entre les lignes, et qu'un conteneur dont la hauteur correspond exactement à son contenu n'a précisément aucun espace restant à répartir. Il faut un conteneur plus haut que la somme des lignes qu'il contient pour observer un effet visible.