align-items en CSS : aligner sur l'axe secondaire sans deviner la hauteur

Un conteneur flex sait facilement répartir ses enfants sur l'axe principal, mais qu'en est-il de l'autre direction, celle perpendiculaire ? Sans align-items, un bouton plus haut que ses voisins déborderait ou casserait l'alignement visuel d'une ligne entière. Cette propriété règle précisément ce problème.

On la rencontre dans presque toutes les mises en page flex : centrer verticalement un logo à côté d'un texte, aligner des icônes de tailles différentes sur une même ligne, ou étirer des cartes pour qu'elles aient toutes la même hauteur dans une rangée.

Définition

align-items est la propriété qui aligne les éléments d'un conteneur Flexbox sur son axe secondaire, celui perpendiculaire à l'axe principal défini par flex-direction. Comme justify-content, elle se pose sur le conteneur, jamais directement sur les enfants.

.conteneur {
  display: flex;
  align-items: center;
}

Sur un conteneur en ligne (row), cette déclaration centre verticalement tous les éléments flexibles, quelle que soit leur hauteur respective.

Les cinq valeurs

stretch, la valeur par défaut, surprend souvent les débutants : sans qu'on ait rien demandé, tous les éléments flexibles s'étirent déjà pour occuper toute la hauteur disponible du conteneur, à condition qu'aucune hauteur ne leur soit imposée explicitement.

Un exemple concret

Une rangée de cartes de tarifs, avec des titres et des descriptions de longueurs différentes, illustre bien l'intérêt de stretch.

.rangee-cartes {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

Chaque carte s'étire automatiquement pour égaler la hauteur de la plus grande de la rangée, sans qu'aucune hauteur fixe n'ait été calculée en JavaScript ni codée en dur dans le CSS.

baseline, la valeur la plus mal comprise

baseline aligne les éléments sur la ligne invisible où repose le texte, celle sur laquelle s'assoient des lettres comme le a ou le n, sans compter les jambages des lettres comme le g ou le p. Elle prend tout son sens quand des éléments de tailles de police différentes doivent sembler écrits sur une même ligne.

.libelle {
  display: flex;
  align-items: baseline;
}

Sans baseline, un grand chiffre à côté d'un petit texte de légende semblerait décalé verticalement, même si les deux éléments sont techniquement sur la même ligne du conteneur flex.

Le piège de la hauteur imposée

align-items: stretch ne peut étirer que des éléments dont la hauteur n'est pas déjà fixée. Un enfant avec une hauteur explicite en CSS, ou un contenu qui impose sa propre taille comme une image sans dimension flexible, ignore purement et simplement l'étirement.

Questions fréquentes

Oui, et c'est même leur usage le plus courant. align-items pose une règle par défaut pour tous les enfants du conteneur, tandis qu'align-self vient l'écraser pour un seul enfant précis. Cette combinaison évite de devoir répéter une valeur d'alignement sur chaque élément quand seul un cas particulier doit s'en écarter.

Le cas le plus fréquent : le conteneur lui-même n'a pas de hauteur définie, ou sa hauteur correspond exactement au contenu, auquel cas il n'y a aucun espace vertical supplémentaire à répartir. align-items a besoin d'un conteneur plus haut que ses enfants pour produire un effet visible.

Oui, la propriété existe également dans un contexte de grille, où elle aligne le contenu de chaque cellule à l'intérieur de sa zone si celle-ci est plus grande que le contenu. Le principe reste identique : agir sur l'axe perpendiculaire au sens principal de la disposition.