align-items - Propriété CSS
Résumé des caractéristiques de la propriété align-items
normal
| stretch
| center
| start
| end
| flex-start
| flex-end
| self-start
| self-end
| baseline
| first baseline
| last baseline
normal
align-items
passe d'une valeur à l'autre sans transition.Description de la propriété align-items
.
align-items
est une propriété CSS, qui gère le positionnement des éléments dans un container flex ou dans une cellule de grille.
Cet alignement prend en compte la direction de remplissage du contenu flex, et la direction et le sens d'écriture de la langue utilisée.
Il est important de noter que ce positionnement se fait par rapport à la ligne, cette dernière étant elle même positionnée par rapport au conteneur
avec la propriété align-content
.
Application à un flex-box.
La propriété align-items
gère la disposition des enfants dans un flex box, suivant l'axe secondaire. La plupart du temps (pour les langues latines)
il s'agira de l'axe vertical.
(rappel : l'axe secondaire et l'axe principal d'un flex-box sont définis par la propriété flex-direction
).
Pour gérer la disposition de chacun des enfants de façon indépendante, reportez-vous à la propriété align-self
.
Application à une grille.
La propriété align-items
gère la disposition verticale des éléments par rapport à la hauteur de leur ligne.
Pour gérer la disposition des lignes elles-même, reportez-vous à la propriété align-content
.
Valeurs pour align-items
.
align-items:
;
- align-items: stretch;
Les éléments sont étirés pour remplir toute la hauteur des lignes.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: center;
Les éléments sont centrés dans leur ligne.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: flex-start; align-items: start;
Ces deux valeurs sont traitées de la même façon par les navigateurs : les éléments sont positionnés au début de leur ligne. La plupart du temps (pour les langues latines) il s'agira du haut de la ligne, mais cela peut aussi être le bas pour d'autres langues. La langue prise en compte est celle indiquée pour le conteneur flex ou grille.
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: flex-end; align-items: end;
Ces deux valeurs sont équivalentes : les éléments sont positionnés à la fin de leur ligne. Comme pour
start
la notion de fin dépend de la langue du texte, mais pour les langues latines, cela correspond au bas de la ligne. La langue considérée est celle du conteneur.AaaaAaaaAaaaAaaaAaaaAaaa - align-items: self-start; align-items: self-end;
Les éléments sont positionnés au début ou à la fin de leur ligne, ces deux notions étant dépendantes de la langue de l'élément lui-même (et non plus celle du conteneur).
AaaaAaaaAaaaAaaaAaaaAaaa - align-items: baseline; align-items: first baseline; align-items: last baseline;
Les éléments sont alignés verticalement par rapport à la ligne de base du texte.
Si
last
est précisé, c'est la ligne de base du dernier élément qui sert de référence. On peut préciserfirst
mais c'est la valeur par défaut :first baseline
est équivalent àbaseline
.AaaaAaaaAaaaAaaaAaaaAaaaLa ligne de base d'un texte est située à la base des lettres sans jambage.
- align-items: safe center; align-items: unsafe center;
Les mots-clé
safe
etsafe
peuvent être ajoutés avant les valeursstart
,end
oucenter
. Ils servent à résoudre le problème du débordement par le haut. Lorsque qu'un élément contient trop de contenu pour la place disponible, son contenu peut être masqué. S'il est centré ou aligné par le bas, ce débordement peut se faire par le haut de l'élément (c'est le début du texte qui est masqué). dans ce cas, même l'ajout d'une barre de défilement ne permettra pas au lecteur d'afficher la partie du contenu qui est masquée.Avec le mot
safe
le navigateur placera toujours les débordements de contenu vers le bas, quitte à ne pas respecter scrupuleusement l'alignement demandé. La valeurunsafe
au contraire impose que l'alignement soit respecté, même si cela provoque un débordement vers le haut.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-items:
initial
; align-items:inherit
; align-items:revert
; align-items:revert-layer
; align-items:unset
;La valeur initiale est :
.normal
Manipulation de la propriété align-items
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-items
en Javascript.
En Javascript, voici comment modifier la valeur de align-items
pour un élément el
.
Javascript accepte deux syntaxes; une avec la notation typique de css, en kebab-case
(un tiret pour séparer les mots),
et une autre avec la notation en camel-case
habituelle en Javascript (une majuscule pour séparer les mots).
function setAlignItems(el) {
el.style['align-items']='center';
// ou
el.style.alignItems='center';
}
Lire en Javascript la valeur de align-items
.
La propriété doit avoir été affectée directement à l'élément lui-même et pas en passant par un sélecteur. La valeur est renvoyée telle qu'elle a été définie.
function getAlignItems(el) {
alert(el.style['align-items']);
// ou
alert(el.style.alignItems);
}
Lire la valeur calculée de align-items
en Javascript.
La valeur calculée est soit la valeur affectée dans la feuille de styles, soit la valeur déterminée en considérant les héritages éventuels et les priorités.
Dans le cas de align-items
, la valeur est retournée sous la forme de l'une des valeurs prédéfinies acceptées par la propriété.
function getCalcAlignItems(el) {
alert(window.getComputedStyle(el).getPropertyValue('align-items'));
}
Modifier la valeur de la propriété align-items
avec JQuery.
Deux syntaxes (très peu différentes) sont possibles en JQuery.
function setAlignItems(el) {
$(el).css('align-items','stretch');
// ou
$(el).css('alignItems','stretch');
}
Lire la valeur calculée de la propriété align-items
avec JQuery.
Comme en Javascript, la valeur est retournée sous la forme de l'une des valeurs prédéfinies acceptées par la propriété.
function getCalcAlignItems(el) {
alert($(el).css('align-items'));
// ou
alert($(el).css('alignItems'));
}
Simulateur de align-items
sur un flex-box et une grille.
Notre simulateur permet de voir l'effet de la propriété align-items
sur un container flex et sur un container grille.
En principe, les valeurs flex-start
et flex-end
sont plutôt réservées aux containers flex, mais on constate que la plupart
des navigateurs les traient également dans le cas d'une grille.
Les tailles de police sont différentes entre les éléments, afin d'illustrer le comportement des valeurs baseline
.
Sur la grille, les cellules sont matérialisées par un encadrement bleu léger.
flex-direction
: (pour le conteneur flex uniquement)
Prise en charge par les navigateurs (compatibilité).
align-items
dans le contexte d'un conteneur flex-box.
align-items
dans le contexte d'un conteneur grille.
safe
et unsafe
dans la syntaxe de la propriété align-items
.
align-items
(Flex-box)
align-items
(Grid)
safe
unsafe
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-items
.
Les spécifications CSS éditées par le W3C sont organisées en modules. align-items
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.