La propriété align-content permet d'aligner les rangées organisée au sein d'un conteneur flexible s'il reste de l'espace sur l'axe orthogonal à sa direction.

Cette propriété n'aura aucun effet sur les boîtes flexibles qui n'utilisent qu'une seule ligne ou une seule colonne.

Valeur initialestretch
Applicabilitéconteneurs flexibles multi-lignes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Pour plus d'informations et de détails sur les différentes propriétés dans le modèle des boîtes flexibles (flexbox), voir Manipuler les boîtes flexibles CSS.

Syntaxe

/* Pack lines from the cross-axis start */
align-content: flex-start;

/* Pack lines to the cross-axis end */
align-content: flex-end;

/* Pack lines around the cross-axis center */
align-content: center;

/* Distribute lines along the cross-axis, start to end */
align-content: space-between;

/* Distribute lines along the cross-axis, equally spaced */
align-content: space-around;

/* Stretch lines to occupy the whole cross-axis */
align-content: stretch;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;

Valeurs

flex-start
Les rangées (lignes ou colonnes selon l'orientation) sont regroupées vers la ligne de début (cross-start) de la boîte flexible (la première rangée est alignée sur le début de la boîte flexible et les rangées ultérieures se suivent les unes les autres).
flex-end
Les rangées (lignes ou colonnes selon l'orientation) sont regroupées vers la ligne de fin (cross-end) de la boîte flexible (la dernière rangée est alignée sur la fin de la boîte flexible et les rangées antérieures s'empilent les unes sur les autres avant).
center
Les rangées sont regroupées au milieu du conteneur flexible. Les rangées se suivent les unes les autres et sont alignées autour du centre du conteneur flexible. L'espace situé entre la première rangée et la ligne de début de la boîte flexible d'une part et l'espace situé entre la dernière rangée et la ligne de fin de la boîte flexible d'autre part sont égaux.
space-between
Les rangées sont distribuées de façon homogène afin que l'espace entre deux rangées soit toujours le même. La première rangée est alignée sur la ligne de début (cross start) de la boîte flexible et la dernière est alignée sur la ligne de fin (cross end).
space-around
Les rangées sont distribuées de façon homogène afin que l'espace entre deux rangées soit toujours le même. L'espace situé avant la première rangée et après la dernière rangée correspond à la moitié de l'espace qu'il y a entre deux rangées adjacentes.
stretch
Les rangées sont étirées afin d'utiliser l'espace libre. L'espace libre est réparti également entre les différentes rangées.

Syntaxe formelle

flex-start | flex-end | center | space-between | space-around | stretch

Exemples

HTML

<div id="container">
  <p>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

#container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}

#container > div > div {
  margin: 2px;
  width: 30px;
  min-height: 30px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#center {
  -webkit-align-content: center;
  align-content: center;
}

#flex-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

#space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}

#space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}

#stretch {
  -webkit-align-content: stretch;
  align-content: stretch;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'align-content' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 21.0-webkit 28.0[1] Pas de support 12.10 Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? 28.0[1] Pas de support 12.10 Pas de support

[1] En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, JackNUMBER, fscholz, Sebastianz, Goofy, Dexter_Deter
 Dernière mise à jour par : SphinxKnight,