Justify-items - Propriété CSS
Résumé des caractéristiques de la propriété justify-items
normal | stretch | left | right | center | start | end | self-start | self-end | baseline | first baseline | last baseline | legacylegacyjustify-items passe d'une valeur à l'autre sans transition.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de justify-items.
justify-items.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
* indique une valeur par défaut, qui peut être omise.
Description de la propriété justify-items.
La propriété justify-items gère la disposition horizontale des éléments par rapport à la largeur de leur colonne, dans un conteneur grille.
Pour gérer la disposition des colonnes elles-même, reportez-vous à la propriété justify-content.
Le schéma ci-dessous montre une grille dont les colonnes sont alignées sur la gauche dans le conteneur grille, et dont les éléments sont alignés sur la droite de leur colonne.
justify-items s'applique de façon identique à tous les éléments de la grille. Pour obtenir un alignement spécifique à chaque élément,
reportez-vous à la propriété justify-self.
justify-items agit sur l'alignement mais, dans certains cas, aussi sur la largeur des éléments de la grille.
Par exemple, avec la valeur stretch les éléments sont agrandis pour emplir toute la largeur de la colonne.
Pour toutes les autres valeurs, la largeur des éléments est fixée à fit-content.
Autres propriétés à connaître.
Ces propriétés concernent toutes le positionnement des éléments dans une grille.
Valeurs pour justify-items.
- justify-items: normal;
Cette valeur est équivalente à
start(voir plus loin).justify-items:normal - justify-items: start; justify-items: end;
Les éléments sont positionnés au début (
start) ou à la fin (end) de leur colonne. Début et fin sont déterminés d'après la direction du texte du conteneur. Celle-ci pouvant être définie par la propriétédirectionappliquée au conteneur.Pour les langues latines, la valeur
startcorrespond donc à la gauche du conteneur, tandis que la valeurendcorrespond à la droite. Pour les langues arabes, qui s'écrivent de droite à gauche, ce sera le contraire.justify-items:start - justify-items: self-start; justify-items: self-end;
Les éléments sont positionnés au début (
start) ou à la fin (end) de leur colonne, en prenant en compte le sens d'écriture des éléments eux-mêmes (et non pas du conteneur).
Sur l'exemple ci-dessous, un seul élément a un sens d'écriture de droite à gauche (rtl) : son alignement est différent de celui des autres éléments.rtljustify-items:self-start - justify-items: left; justify-items: right;
Les éléments sont positionnés sur la gauche (
left) ou sur la droite (right) de leur colonne. Le sens d'écriture n'est pas pris en compte par ces deux valeurs.rtljustify-items:left - justify-items: center;
Les éléments sont centrés dans leur colonne.
rtljustify-items:center - justify-items: stretch;
Les éléments sont étirés pour remplir toute la largeur de leur colonne.
Attention ! Cela ne fonctionne que pour les éléments dont la largeur a été fixée àauto. Les éléments dont la largeur est fixée ne changent pas. Sur notre exemple, seuls les éléments de la première ligne ont une largeurautoet sont donc ajustés à la largeur de la colonne.rtljustify-items:stretch - justify-items: legacy; justify-items: legacy left; justify-items: legacy right; justify-items: legacy center;
Le mot
legacytransmet la valeur aux descendants. Il peut être utilisé avec les trois valeursleft,rightoucenter.Utilisé seule (sans
left,rightnicenter) la valeurlegacyest équivalente ànormal. - justify-items: baseline; justify-items: first baseline; justify-items: last baseline; ⚠
L'alignement des éléments se fait d'après la ligne de base du texte. Ces valeurs ne sont utilisables que si le texte des éléments est vertical. En effet, pour que l'alignement soit possible, la ligne de base doit être verticale.
Si la valeurbaselineest indiquée seule,firstest par défaut :baselineest donc équivalent àfirst baseline.L'exemple ci-dessous montre une grille dont les éléments sont écrits verticalement (
writing-mode:vertical-lr) et dont les tailles de caractères sont différentes. On constate que, dans une colonne donnée, ce sont bien les lignes de base des textes qui sont alignées.AaAaAaAaAaAajustify-items:baseline - justify-items: initial; (
legacy) justify-items: inherit; justify-items: revert; justify-items: revertLayer; justify-items: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de justify-items.
L'animation de justify-items se fait bien sûr de façon brutale, sans progressivité, puisque les valeurs acceptées ne sont pas numériques.
Accéder à la propriété justify-items par programme.
Modifier la valeur de justify-items en Javascript.
Les deux syntaxes habituelles de Javascript sont utilisables :
- Avec le nom de la propriété écrit en
kebab-case(un tiret pour séparer les mots). - Avec le nom écrit en
camel-case(une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['justify-items'] = 'start';
// ou
let el = document.getElementById('id');
el.style.justifyItems = 'start';
Lire en Javascript la valeur de justify-items.
L'exemple de code ci-dessous récupère la valeur de justify-items si cette dernière a été initialisée dans l'attribut style de l'élément.
Les initialisations via un sélecteur CSS ne sont pas prises en compte par ce code.
let el = document.getElementById('id');
let value = el.style['justify-items'];
// ou
let el = document.getElementById('id');
let value = el.style.justifyItems;
Lire la valeur calculée de justify-items en Javascript.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages et de la résolution des conflits éventuels
(voir Les priorités). Si aucune valeur n'a été définie pour justify-items, ni sur l'élément, ni sur se parents,
la valeur calculée sera la valeur initiale de la propriété (legacy dans le cas de justify-items).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('justify-items');
Modifier la valeur de la propriété justify-items avec JQuery.
$('#id').css('justify-items', 'start');
// ou
$('#id').css('justifyItems', 'start');
Lire la valeur calculée de la propriété justify-items avec JQuery.
let value = $('#id').css('justify-items');
D'autres exemples ?...
Pour d'autres exemples de code Javascript et JQuery, consultez la page sur Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété justify-items 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 sérialisée (mémorisée) la valeur de justify-items. Cependant, dans le
cas de justify-items il n'y a pas de mystère puisque toutes les valeurs sont prédéfinies.
Exemple interactif avec la propriété justify-items.
Le simulateur vous permet de choisir la direction d'écriture pour le container grille.
Mais Chacun des éléments a sa propre direction d'écriture :
les trois premiers sont écrits de gauche à droite comme c'est le cas dans les langues latines (ltr),
et les trois derniers sont écrits de droite à gauche comme dans les langues arabes (rtl).
Cette particularité fera une différence pour les valeurs self-start et self-end.
Les colonnes de la grille ont été matérialisées par des couleurs différentes. Il s'agit d'une image de fond.
direction (pour le container) :
direction:rtldirection:rtldirection:rtlCompatibilité des navigateurs avec justify-items.
Pas de problème de compatibilité à signaler sur la propriété justify-items, aussi bien lorsqu'elle est utilisée sur
un flex-box, que sur une grille.
justify-items dans le contexte d'un conteneur flex-box.justify-items dans le contexte d'un conteneur grille.justify-items(flex-box)
justify-items(grille)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Histoire de la propriété justify-items.
-
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.Concernantjustify-items. Introduction des mises en page avec un conteneur grille, et de la propriétéjustify-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.
Concernantjustify-items. Pas de changement concernant la propriétéjustify-items.06 Février 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Alignement des blocs - Niveau 3
Concernantjustify-items. Les propriétés d'alignement (grille ou flex-box) sont maintenant regroupées dans ce module de spécification.12 Juin 2012Document de travail.
Autres propriétés de positionnement et d'alignement.
Les propriétés de positionnement et d'alignement ont regroupées dans le module module CSS - Alignement des blocs, aussi bien pour les flex-box, que les grilles.