Align-content - Propriété CSS

Schéma de la syntaxe de align-content.

* indique une valeur par défaut, qui peut être omise.

Description.

align-content est une propriété CSS, qui gère les positionnement des lignes dans un conteneur flexible ou dans une grille. Ce positionnement prend en compte la direction du conteneur, et le sens d'écriture en fonction de la langue utilisée.

Appliquée à un conteneur flex-box, la propriété align-content gère la disposition des lignes suivant l'axe secondaire.
Rappel : l'axe principal et l'axe secondaire sont définis par la propriété CSS flex-direction. La plupart du temps l'axe secondaire sera l'axe vertical.

Lorsqu'elle est appliquée à une grille, align-content gère la disposition des lignes dans le conteneur grille, dans le cas où la hauteur cumulée de ces lignes est inférieure à la hauteur de la grille elle-même.

Il faut bien noter que align-content s'occupe du positionnement des lignes, et non pas des éléments eux-mêmes. Ces derniers sont positionnés par la propriété align-items et le positionnement des éléments se fait par rapport à leur ligne, alors que les lignes se positionnement par rapport au conteneur. La nuance est importante, même si très souvent cela ne fait pas de différence car les éléments occupent toute la hauteur de la ligne.
Voici par exemple un conteneur flex dont les lignes sont positionnées au début du conteneur par la propriété align-content, et les éléments positionnés en bas de leur ligne par align-items.

Et, en deuxième exemple, un conteneur flex dont les lignes sont positionnées à la fin du conteneur, et les éléments centrés dans leur ligne.

Valeurs pour align-content.

Dans tous les exemples ci-dessous, align-items a été fixée à stretch afin de les rendre plus lisible.

• align-content: normal;

  Valeur par défaut. Est équivalente à stretch.

   

   

   

   

   

   
• align-content: stretch;

  Les lignes sont étirées pour occuper toute la hauteur du conteneur.

  Les éléments du conteneur flex sont visibles en bleu, mais n'oubliez pas que align-content s'occupe de l'alignement des lignes, et non pas des éléments eux-mêmes.

   

   

   

   

   

   
• align-content: center;

  Les lignes sont groupées au centre du conteneur.

   

   

   

   

   

   
• align-content: flex-start; align-content: start;

  Ces deux valeurs sont traitées de façon équivalente par les navigateurs, même si la valeur flex-start est plutôt réservée aux conteneur flex. Les lignes sont groupées au début du container. Dans le cas d'un flex-box, la notion de début dépend de la direction qui a été choisie pour le conteneur. La plupart du temps cela correspondra au haut du conteneur.

   

   

   

   

   

   
• align-content: flex-end; align-content: end;

  Ces deux valeurs sont elles aussi synonymes pour les navigateurs. Les lignes sont groupées à la fin du conteneur. Dans le cas d'un flex-box, la fin dépend de la direction qui a été choisie pour le conteneur. La plupart du temps cela correspondra au bas du conteneur.

   

   

   

   

   

   
• align-content: space-between;

  Le premier élément est placé tout au début du conteneur, le dernier élément tout à la fin. les éléments restant sont répartis dans l'espace restant.
  Si R est la hauteur restant à répartir et n le nombre de lignes, l'espacement E sera calculé par la formule :
  E = R / (n-1)

   

   

   

   

   

   
• align-content: space-around;

  Les espaces entre, avant et après les lignes sont ajustés pour répartir les lignes sur toute la hauteur du conteneur flex ou grille.
  Mettons R la hauteur restant à répartir et n le nombre de lignes, on aura les calculs suivants :
  Espace au début et à la fin : E = R /2n
  Espace entre les lignes : E = R / n

   

   

   

   

   

   
• align-content: space-evenly;

  Les espaces entre, avant et après les lignes sont calculés pour être tous identiques. Les lignes se répartissent sur toute la hauteur du conteneur. L'espace restantR est réparti également entre tous ces espaces :
  E = R / (n+1)

   

   

   

   

   

   
• align-content: baseline; ⚠ align-content: first baseline; ⚠ align-content: last baseline; ⚠

  L'alignement se fait suivant la ligne de base du texte, en prenant comme référence le premier ou le dernier élément de la ligne. Le mot first étant par défaut, on peut l'omettre et indiquer seulement baseline.

  

  Dans les exemple ci-dessous, nous avons dû appliquer également la valeur à align-items.

   
   

   

   

   

   

   
   

  align-content:first baseline;
align-items:first baseline;

   
   

   

   

   

   

   
   

  align-content:last baseline;
align-items:last baseline;
• align-content: safe center; align-content: unsafe end;

  Les modificateurs safe et unsafe s'utilisent avec les alignements start, center et end.

  Le modificateur safe permet de résoudre le problème des débordements vers le haut qui peut apparaître avec certains types d'alignements. En effet, le contenu qui déborde par le haut n'est pas accessible avec les barres de défilement.
  L'exemple ci-dessous est une grille de hauteur fixe qui contient des éléments dont le contenu déborde la place disponible. L'alignement des lignes a été positionné sur center. Une barre de défilement a été prévue, mais vous constatez qu'elle ne permet pas de remonter pour afficher le début du texte.

  Cet élément, relativement grand, s'étend sur plusieurs lignes et déborde le haut du container. La première ligne de son texte n'est pas accessible.

  Ce deuxième élément est plus petit, mais son début est cependant illisible.

  Avec l'indication safe (ci-dessous), s'il y a débordement, le navigateur préférera décaler les éléments pour que le débordement se fasse vers le bas, au détriment du respect strict de la valeur d'alignement demandée.
  

  Cet élément, relativement grand, s'étend sur plusieurs lignes et déborde le haut du container. La première ligne de son texte n'est pas accessible.

  Il en est de même pour ce deuxième élément.

  unsafe étant la valeur par défaut, elle est rarement indiquée.

• align-content: initial; (normal) align-content: inherit; align-content: revert; align-content: revertLayer; align-content: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété align-content par programme.

Utiliser Javascript pour modifier la valeur de align-content.

On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['align-content'] = 'center'; // ou let el = document.getElementById('id'); el.style.alignContent = 'center';

Lire la valeur de align-content avec Javascript.

La propriété doit avoir été affectée directement à l'élément lui-même et non pas en passant par un sélecteur. La valeur est renvoyée telle qu'elle a été définie.

let el = document.getElementById('id'); let value = el.style['align-content']; // ou let el = document.getElementById('id'); let value = el.style.alignContent;

Lire la valeur calculée de align-content en Javascript.

La valeur calculée est celle qui résulte, soit de l'application d'une valeur à l'élément via un sélecteur quelconque, soit de la résolution des héritages éventuels en tenant compte des priorités, soit encore il s'agira de la valeur par défaut.

Dans le cas de align-content, la valeur est retournée telle qu'elle a été définie dans la feuille de styles.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('align-content');

Utiliser JQuery pour modifier la valeur de la propriété align-content.

JQuery permet également de modifier la valeur d'une propriété, avec une syntaxe plus courte.


$('#id').css('align-content', 'center');
// ou
$('#id').css('alignContent', 'center');


Lire la valeur calculée de la propriété align-content avec JQuery.

let value = $('#id').css('align-content');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez par vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété align-content et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de align-content, en particulier comment sont notées les valeurs par défaut.

Exemple interactif sur un flex-box et sur une grille.

Rappelons que l'effet de la propriété align-content est appliqué suivant l'axe secondaire du container flex. Vous pouvez choisir comment est orienté le container flex ci-dessous (propriété flex-direction).

Compatibilité des navigateurs avec align-content.

La propriété align-content est bien reconnue par les navigateurs actuels, aussi bien dans un flex-box que dans une grille, mais il reste des problèmes pour aligner des blocs, ou pour la mise en page sur plusieurs colonnes.

1

Propriété
align-content
(flex-box)

2

Propriété
align-content
(grille)

3

Propriété
align-content
(multi-colonnes)

4

Propriété
align-content
(blocs)

Estimation de la prise en charge globale.

96%

96%

85%

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété align-content.

• Module CSS - Mise en page par flex-box - Niveau 1

  Introduction des flex-box pour les mises en page flexibles.
  Description de la propriété align-content dans le contexte d'un flex-box.
  

  23 Juillet 2009

  Document de travail.

  

  18 Septembre 2012

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 1

  Introduction des mises en page avec une grille.
  Description de la propriété align-content dans le contexte d'une grille.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Pas de changement concernant la propriété align-content.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Alignement des blocs - Niveau 3

  La description de la propriété align-content a été transférée dans ce module "Alignement des boites".
  

  12 Juin 2012

  Document de travail.

  

  

  

Voir aussi : autres notions relatives aux alignements.

La propriété align-content a d'abord été décrite dans les spécifications relatives aux grilles et aux flex-box. Une spécification relatives aux alignements a été depuis créée : module CSS - Alignement des blocs (CSS Box Alignment Module).

Propriétés :