justify-items
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
La propriété CSS justify-items
définit la valeur par défaut de justify-self
pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).
Exemple interactif
L'effet de cette propriété sera différent selon le type de disposition utilisé :
- Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.
- Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.
- Pour les cellules de tableau, cette propriété est ignorée (en savoir plus).
- Pour les dispositions flexibles (flexbox), cette propriété est ignorée (en savoir plus).
- Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (en savoir plus).
Syntaxe
/* Mots-clés de base */
justify-items: auto;
justify-items: normal;
justify-items: stretch;
/* Alignement par rapport à l'axe */
justify-items: center; /* Les éléments sont regroupés au centre */
justify-items: start; /* Les éléments sont regroupés au début */
justify-items: end; /* Les éléments sont regroupés à la fin */
justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */
justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Les éléments sont regroupés à gauche */
justify-items: right; /* Les éléments sont regroupés à droite */
/* Alignement par rapport à la ligne de base */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
/* Gestion du dépassement */
justify-items: safe center;
justify-items: unsafe center;
/* Valeurs historiques */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;
/* Valeurs globales */
justify-items: inherit;
justify-items: initial;
justify-items: unset;
Cette propriété peut être définie selon trois formes différentes :
-
Grâce à un mot-clé :
normal
,auto
oustretch
. -
Relativement à la ligne de base : dans ce cas, on a le mot-clé
baseline
éventuellement suivi defirst
ou delast
-
Grâce à un positionnement :
- Un mot-clé parmi :
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
ouright
- Puis éventuellement
safe
ouunsafe
- Un mot-clé parmi :
-
Grâce à un alignement tel que précédemment spécifié : le mot-clé
legacy
suivi deleft
ou deright
.
Valeurs
auto
-
La valeur utilisée est celle de la propriété
justify-items
pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue,auto
sera synonyme denormal
. normal
-
Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
- Pour une disposition en bloc,
normal
est synonyme destart
. - Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme
start
pour les boîtes des éléments remplacés ou commestretch
pour les autres boîtes positionnées de façon absolue. - Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
- Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée*.*
- Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de
stretch
, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme destart
.
- Pour une disposition en bloc,
start
-
Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.
end
-
Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.
flex-start
-
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à
start
. flex-end
-
Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à
end
. self-start
-
Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.
self-end
-
Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.
center
-
Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.
left
-
Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.
right
-
Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.
baseline first baseline
last baseline
-
Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. Si
first baseline
n'est pas prise en charge, la valeur correspondra àstart
, silast baseline
n'est pas prise en charge, la valeur correspondra àend
. stretch
-
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par
max-height
/max-width
(ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur. safe
-
Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur
start
avait été utilisée. unsafe
-
Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.
legacy
-
La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a
justify-self: auto
, le mot-clélegacy
ne sera pas pris en compte mais uniquement la valeurleft
,right
, oucenter
.
Syntaxe formelle
justify-items =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center
<baseline-position> =
[ first | last ]? &&
baseline
<overflow-position> =
unsafe |
safe
<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end
Exemples
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
height: 500px;
width: 500px;
grid-gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
align-content: space-between;
justify-items: start;
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}
HTML
<div class="wrapper">
<div class="item1">Objet 1</div>
<div class="item2">Objet 2</div>
<div class="item3">Objet 3</div>
<div class="item4">Objet 4</div>
</div>
Résultat
Spécifications
Specification |
---|
CSS Box Alignment Module Level 3 # justify-items-property |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'alignement des boîtes avec les grilles CSS
- La propriété
justify-self
- Le module de spécification CSS Box Alignment
- La propriété raccourcie
place-items
- La propriété
align-items