Propriété CSSFlexbox

align-content

Répartit des lignes entières d’éléments sur l’axe secondaire du conteneur.

Valeur initiale: normal
Héritée: Non
Animable: non
S’applique à: conteneurs flex à plusieurs lignes, conteneurs grid, multi-colonnes et blocs
JavaScript: element.style.alignContent = "center"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 120px;
}

HTML de l’exemple

<div class="badges stage">
  <span class="box">Série de 7 jours</span><span class="box">100 tâches</span><span class="box">Maître CSS</span><span class="box">Première page</span>
</div>

Aperçu

Définition et utilisation

La propriété align-content agit au niveau des lignes, pas des éléments individuels. Dans un conteneur flex, elle n’a d’effet que lorsque les éléments reviennent à la ligne sur plusieurs lignes (flex-wrap: wrap) et qu’il reste de l’espace libre sur l’axe secondaire.

Les valeurs rappellent justify-content : les lignes peuvent se regrouper au début, au centre, à la fin, ou se répartir avec des espaces égaux. Par défaut, les lignes s’étirent pour remplir le conteneur.

Dans une grille Grid, la même propriété répartit des rangées entières, et dans les navigateurs récents elle fonctionne aussi sur des blocs ordinaires, ce qui permet de centrer un contenu verticalement sans Flexbox.

Syntaxe

align-content: normal | flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

Valeurs

flex-start
Les lignes se regroupent près du bord supérieur.
center
Les lignes se regroupent au centre.
flex-end
Les lignes se collent en bas.
space-between
La première ligne en haut, la dernière en bas, et le reste de l’espace entre elles.
stretch
Les lignes s’étirent pour remplir la hauteur.

Valeur	Description
flex-start	Les lignes se regroupent près du bord supérieur.
center	Les lignes se regroupent au centre.
flex-end	Les lignes se collent en bas.
space-between	La première ligne en haut, la dernière en bas, et le reste de l’espace entre elles.
stretch	Les lignes s’étirent pour remplir la hauteur.

Valeurs en pratique

flex-start

Les lignes se regroupent près du bord supérieur.

.demo { align-content: flex-start; }

center

Les lignes se regroupent au centre.

.demo { align-content: center; }

flex-end

Les lignes se collent en bas.

.demo { align-content: flex-end; }

space-between

La première ligne en haut, la dernière en bas, et le reste de l’espace entre elles.

.demo { align-content: space-between; }

stretch

Les lignes s’étirent pour remplir la hauteur.

.demo { align-content: stretch; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Si align-content ne change rien, vérifiez que le conteneur a flex-wrap: wrap et une hauteur supérieure à son contenu.
Pour aligner les éléments à l’intérieur d’une même ligne, utilisez align-items, pas align-content.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours