align-content - Propriété CSS
Résumé des caractéristiques de la propriété align-content
normal
| start
| end
| flex-start
| flex-end
| stretch
| space-around
| space-between
| space-evenly
| baseline
| first baseline
| last baseline
normal
align-content
passe d'une valeur à l'autre sans transition.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:
;
- 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.
SiR
est la hauteur restant à répartir etn
le nombre de lignes, l'espacementE
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.
MettonsR
la hauteur restant à répartir etn
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 restant
R
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.
- 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 seulementbaseline
. - align-content: safe center; align-content: unsafe end;
Les modificateurs
safe
etunsafe
s'utilisent avec les alignementsstart
,center
etend
.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é surcenter
. 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)
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.
align-content
dans le contexte d'un conteneur flex.
align-content
dans le contexte d'un grille.
align-content
(flex-box)
align-content
(grid)
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.