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
| legacy
legacy
justify-items
passe d'une valeur à l'autre sans transition.Description de 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
.
Valeurs pour justify-items
.
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édirection
appliquée au conteneur.Pour les langues latines, la valeur
start
correspond donc à la gauche du conteneur, tandis que la valeurend
correspond à 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 largeurauto
et 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
legacy
transmet la valeur aux descendants. Il peut être utilisé avec les trois valeursleft
,right
oucenter
.Utilisé seule (sans
left
,right
nicenter
) la valeurlegacy
est é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 valeurbaseline
est indiquée seule,first
est par défaut :baseline
est 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
; justify-items:inherit
; justify-items:revert
; justify-items:revert-layer
; justify-items:unset
;La valeur initiale est :
.legacy
Animation de la propriété 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.
Manipulation de la propriété justify-items
par programme.
La petite grille ci-dessous (de 4 cellules) servira d'exemple pour tester les exemples de code.
Au chargement de la page, la propriété justify-items
est définie à la valeur center
.
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).
function setJustifyItems(el) {
el.style['justify-items']='start';
// ou
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.
function getJustifyItems(el) {
alert(el.style['justify-items']);
// ou
alert(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 règles de priorité). 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
).
function getCalcJustifyItems(el) {
alert(window.getComputedStyle(el).getPropertyValue('justify-items'));
}
Modifier la valeur de la propriété justify-items
avec JQuery.
function setJustifyItems(el) {
$(el).css('justify-items','end');
// ou
$(el).css('justifyItems','end');
}
Lire la valeur calculée de la propriété justify-items
avec JQuery.
function getCalcJustifyItems(el) {
alert($(el).css('justify-items'));
// ou
alert($(el).css('justifyItems'));
}
D'autres exemples ?...
Pour d'autres exemples de code Javascript et JQuery, consultez la page sur Javascript et CSS.
Simulateur.
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
.
D'autres éléments ont également des particularités. L'élément numéro 3 a une contrainte sur sa largeur maximale.
On voit que même la valeur stretch
pour ne passe pas outre cette contrainte.
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:rtl
direction:rtl
direction:rtl
Prise en charge par les navigateurs (compatibilité).
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
appliquée à un conteneur flex.
justify-items
appliquée à un conteneur grille.
justify-items
(Flex-box)
justify-items
(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 justify-items
.
Les spécifications CSS éditées par le W3C sont organisées en modules. justify-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.