Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

align-content - Propriété CSS

align-content

Résumé des caractéristiques de la propriété align-content

Description rapide
Disposition des lignes dans un flex-box ou une grille.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | start | end | flex-start | flex-end | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété align-content passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CR (document proposé pour la recommandation)

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.

align-content:start; align-items:end;

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.

align-content:end; align-items:center;

Syntaxes pour align-content.

align-content:
Schéma syntaxique de la propriété align-content en CSSSyntaxe de la propriété d'alignement align-content pour les conteneurs grille et flex. normal normal first first last last safe safe unsafe unsafe stretch stretch space-around space-around space-between space-between space-evenly space-evenly baseline baseline start start center center end end
;
  • 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.

    Ici encore, le rendu est trompeur : on n'a pas l'impression que les éléments soient centrés suivant l'axe vertical. C'est parce que align-content agit sur les lignes.

  • 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;

    L'alignement se fait suivant la ligne de base du texte, en prenant comme référence le premier élément présent sur la ligne.

    Baseline : ligne de base du texte

  • 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.

  • 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 et peut être affiché en entier (pas de problème).

    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.
    Ce deuxième élément est plus petit et peut être affiché en entier (pas de problème).

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

  • align-content: initial; align-content: inherit; align-content: revert; align-content: revert-layer; align-content: unset;

    La valeur initiale est : normal.

Manipulation de la propriété align-content par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

Modifier la valeur de align-content en Javascript.

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).


function setAlignContent(el) {
el.style['align-content']='center';
// ou
el.style.alignContent='center';
}

Lire en Javascript la valeur de align-content.

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.


function getAlignContent(el) {
alert(el.style['align-content']);
// ou
alert(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 el via un sélecteur quelconque, soit de la résolution des héritages éventuels en tenant compte des priorités.

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


function getCalcAlignContent(el) {
alert(window.getComputedStyle(el).getPropertyValue('align-content'));
}

Modifier la valeur de la propriété align-content avec JQuery.


function setAlignContent(el) {
$(el).css('align-content','stretch');
// ou
$(el).css('alignContent','stretch');
}

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


function getCalcAlignContent(el) {
alert($(el).css('align-content'));
// ou
alert($(el).css('alignContent'));
}

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).


flex-direction : (conteneur flex uniquement)

align-content :

Flex-box
1
2
3
4
5
6
7
Grille
1
2
3
4
5
6
7

Prise en charge par les navigateurs (compatibilité).

La propriété align-content est bien reconnue par les navigateurs actuels, aussi bien dans un flex-box que dans une grille.

Colonne 1
Traitement correct de la propriété align-content dans le contexte d'un conteneur flex.
Colonne 2
Traitement correct de la propriété align-content dans le contexte d'un grille.
1
align-content
(flex-box)
2
align-content
(grid)
Estimation de la prise en charge en pourcentage du parc actuel.
95%
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que align-content.

Les spécifications CSS éditées par le W3C sont organisées en modules. align-content fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Disposition verticale des éléments dans un flex-box ou une grille.
Position verticale de l'un des éléments dans un flex-box ou une grille.
Définit l'espacement entre les colonnes.
Définit les espacements entre les lignes et entre les colonnes (grille, flex-box, colonnes).
Ajuste l'espacement des colonnes dans une grille.
Ajuste l'espacement des lignes et des colonnes dans une grille.
Ajuste l'espacement des lignes dans une grille.
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
Gère l'alignement horizontal des éléments dans un conteneur grille.
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
Disposition des éléments dans un flex-box ou une grille.
Défini le placement des éléments dans leur cellule (grille).
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
Définit l'espace entre les lignes d'une grille.