Attribut ALIGN-CONTENT

Rôle

Si l’axe principal est à l’horizontal mais que le flex-container (conteneur) n’est pas assez large, les éléments flex-item passent à la ligne avec l’attribut ‘flex-wrap:wrap’, et l’alignement ne se fera plus sur l’axe principal mais par rapport au conteneur. Pour gérer ce cas de figure vous pouvez utiliser l’attribut align-content.

Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible (display:flex).

 Note : voir notre tutoriel sur le modèle flex-box.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.alignContent

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  width : 100px;
  height: 200px;
  border : thin solid silver;  
  display : flex;
  flex-wrap: wrap;
  align-content: center;
}
.rowflex div{
  padding: 5px;
  width: 100px;
}
.rowflex .milieu{
  background-color: orange;
}
.rowflex .gauche{
  background-color: pink;
}
.rowflex .droite{
  background-color: silver;
}

– Le code HTML

<div class="rowflex">
  <div class="gauche">gauche</div>
  <div class="milieu">milieu</div>
  <div class="droite">droite</div>
</div>

Résultat

Dans ce cas la largeur du conteneur étant limitée à 100px, les enfants passent à la ligne. Pour gérer l’alignement sur toute la hauteur du conteneur, on utile bien l’attribut ‘align-content’ et non pas l’attribut ‘justify-content’ (qui s’applique sur l’axe principal qui est à l’horizontal).

Compatibilité

 21.0(-webkit-)  18.0(-moz-)  10.0(-ms-)  6.1(-webkit-)  12.1

Valeurs

Les différentes valeurs de l’attribut align-content sont :

flex-start

Au début du conteneur
Syntaxe :
align-content : flex-start

flex-end

A la fin du conteneur
Syntaxe :
align-content : flex-end

center

Au milieu du conteneur
Syntaxe :
align-content : center

strech

Elément étiré dans l’espace disponible
Syntaxe :
align-content : strech

space-between

Répartition justifiée entre le premier et le dernier élément
Syntaxe :
align-content : space-between

space-around

Répartition justifiée du début à la fin
Syntaxe :
align-content : space-around

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
align-content : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
align-content : inherit

A voir aussi

display– clear– z-index– align-content– align-content– align-self– vertical-align