place-items
La propriété raccourcie place-items
définit les valeurs utilisées pour les propriétés align-items
et justify-items
. La première valeur fournie est utilisée pour align-items
et la seconde est utilisée pour justify-items
. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour justify-items
.
Exemple interactif
Syntaxe
/* Valeurs avec un mot-clé */
place-items: auto center;
place-items: normal start;
/* Alignement géométrique */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;
/* Alignement par rapport à la ligne de base */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;
/* Valeurs globales */
place-items: inherit;
place-items: initial;
place-items: unset;
Valeurs
auto
-
La valeur utilisée est celle de
justify-items
pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel casauto
sera synonyme denormal
. normal
-
L'effet de ce mot-clé depend du mode de disposition utilisé :
- Pour les dispositions en bloc, ce mot-clé est synonyme de
start
. - Pour les dispositions absolues, ce mot-clé se comporte comme
start
pour les éléments remplacés ou commestretch
pour tous les autres éléments. - Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.
- Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée.
- Pour les dispositions en grille, ce mot-clé se comporte comme
stretch
sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme destart
.
- Pour les dispositions en bloc, ce mot-clé est synonyme de
start
-
L'élément est aligné au début de l'axe dans la direction correspondante.
end
-
L'élément est aligné à la fin de l'axe dans la direction correspondante.
flex-start
-
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant. 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 correspondant. 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 de leur boîte vers le début de l'axe correspondant.
self-end
-
Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.
center
-
L'élément est centré le long de l'axe correspondant.
left
-
L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme
start
. right
-
L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme
start
. 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, 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.
Syntaxe formelle
place-items =
<'align-items'> <'justify-items'>?
<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center
<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
#container {
height: 200px;
width: 240px;
place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
background-color: #8c8c8c;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}
Résultat
Spécifications
Specification |
---|
CSS Box Alignment Module Level 3 # place-items-property |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Guide sur les grilles : Aligner des objets dans une grille
-
Guide sur les boîtes flexibles : Les concepts de bases
-
Guide sur les boîtes flexibles : Aligner des objets dans un conteneur flexible
-
Les propriétés détaillées correspondantes :
justify-self
align-self