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 baselinenormalalign-items passe d'une valeur à l'autre sans transition.Per grammar : sérialisation dans l'ordre de la syntaxe.Schéma de la syntaxe de align-items.
align-items.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG
* indique une valeur par défaut, qui peut être omise.
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.
Autres propriétés à connaître.
Ces propriétés concernent toutes le positionnement des éléments dans une grille.
Valeurs pour align-items.
- align-items: stretch;
Les éléments sont étirés pour remplir toute la hauteur des lignes.
AaaaAaaaAaaaAaaaAaaaAaaajustify-items:stretch; - align-items: center;
Les éléments sont centrés dans leur ligne.
AaaaAaaaAaaaAaaaAaaaAaaajustify-items:center; - 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.
AaaaAaaaAaaaAaaaAaaaAaaajustify-items:start; - 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
startla 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.AaaaAaaaAaaaAaaaAaaaAaaajustify-items:end; - 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
lastest précisé, c'est la ligne de base de la dernière ligne qui sert de référence. On peut préciserfirstmais c'est la valeur par défaut :first baselineest équivalent àbaseline.Aaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
Aaaa
justify-items:baseline;Aaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
AaaaAaaa
Aaaa
justify-items:last baseline;La 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é
safeetunsafepeuvent être ajoutés avant les valeursstart,endoucenter. 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, ce contenu peut être en partie masqué. S'il est centré ou aligné par le bas, le 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 d'afficher la partie du contenu qui est masquée.Avec le mot
safele navigateur placera toujours les débordements de contenu vers le bas, quitte à ne pas respecter scrupuleusement l'alignement demandé. La valeurunsafeau 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).align-items:unsafe center;Cet élément déborde le hauteur du container. Malgré tout il est entièrement affichable en utilisant la barre de défilement, y compris les premières lignes.Ce deuxième élément est plus petit et peut être affiché en entier (pas de problème).align-items:safe center;unsafeétant la valeur par défaut, elle est rarement indiquée. - align-items: initial; (
normal) align-items: inherit; align-items: revert; align-items: revertLayer; align-items: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Accéder à la propriété align-items par programme.
Modifier la valeur de align-items en Javascript.
En Javascript, voici comment modifier la valeur de align-items.
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).
let el = document.getElementById('id');
el.style['align-items'] = 'center';
// ou
let el = document.getElementById('id');
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.
let el = document.getElementById('id');
let value = el.style['align-items'];
// ou
let el = document.getElementById('id');
let value = 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 (ou ans l'attribut style), soit la valeur déterminée en considérant
les héritages éventuels et les priorités. A défaut, ce sera la valeur initiale de la propriété (normal dans le cas de align-items).
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é.
let el = document.getElementById('id');
let value = 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.
$('#id').css('align-items', 'center');
// ou
$('#id').css('alignItems', 'center');
Lire la valeur calculée de la propriété align-items avec JQuery.
let value = $('#id').css('align-items');
Testez par vous même.
Ce petit simulateur vous permet de tester vous même l'affectation de la propriété align-items et la restitution de sa valeur telle qu'elle a été
attribuée (premier bouton) ou de sa valeur calculée (deuxième bouton).
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 traitent é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.
flex-direction : (pour le conteneur flex uniquement)
(pour first)
(pour first)
Compatibilité des navigateurs avec align-items.
La propriété align-items est maintenant bien reconnue par tous les navigateurs récents, aussi bien dans le contexte d'un flex-box que dans
celui d'une grille.
align-items dans le contexte d'un conteneur flex-box.align-items dans le contexte d'un conteneur grille.Remarques :
(1) Dans Internet Explorer 10 et 11, si les éléments flexibles ont align-items:center et que leur contenu est trop volumineux, ils déborderont des limites de leur conteneur.
align-items(Flex-box)
align-items(Grille)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Chrome
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété align-items.
La propriété align-items a tout d'abord été décrire dans les spécifications relatives aux grilles ou au flex-box. Mais une spécification spécifique
aux alignements des blocs a ensuite été créée.
-
Module CSS - Mise en page par flex-box - Niveau 1
Concernantalign-items. Première spécification concernant les flex-box et première description de la propriétéalign-items.
23 Juillet 2009Document de travail.
18 Septembre 2012Candidat à la recommandation.
-
Module CSS - Mise en page par grille - Niveau 1
Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.Concernantalign-items. Première spécification relative aux grilles, et introduction de la propriétéalign-items.07 Avril 2011Document de travail.29 Septembre 2016Candidat à la recommandation. -
Module CSS - Mise en page par grille - Niveau 2
Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.
Concernantalign-items. Pas de changement concernant la propriétéalign-items.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Alignement des blocs - Niveau 3
Concernantalign-items. Création d'un module de spécification spécifique aux alignement. La description de la propriétéalign-itemsest transférée dans ce module.12 Juin 2012Document de travail.
Autres propriétés relatives à l'alignement des blocs.