align-content

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.

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

CSS

#container {
  display: flex;
  height:200px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  align-content: flex-end; /* Cette valeur peut être modifiée dans la démo */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  height: 50px;
  background-color: #a0c8ff;
}

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<select id="contentAlignment">
  <option value="flex-start">flex-start</option>
  <option value="flex-end" selected>flex-end</option>
  <option value="center">center</option>
  <option value="space-between">space-between</option>
  <option value="space-around">space-around</option>
  <option value="stretch">stretch</option>
</select>

var contentAlignment = document.getElementById("contentAlignment");
contentAlignment.addEventListener("change", function (evt) {
  document.getElementById("container").style.alignContent = evt.target.value;
});

Résultat

Spécifications

Compatibilité des navigateurs

[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

•   Manipuler les boîtes flexibles CSS