Propriété CSS place-items
La propriété place-items est un raccourci pour définir align-items et justify-items en CSS. Découvrez les valeurs et essayez des exemples.
La propriété CSS place-items est un raccourci qui définit deux propriétés d'alignement à la fois :
- align-items — alignement le long de l'axe de bloc (dans une disposition par défaut, la direction verticale/colonne).
- justify-items — alignement le long de l'axe inline (dans une disposition par défaut, la direction horizontale/ligne).
Au lieu d'écrire les deux propriétés séparément, vous rédigez une seule déclaration place-items. C'est particulièrement utile avec les dispositions Grid, où elle contrôle comment chaque élément est positionné à l'intérieur de sa propre cellule de grille (les valeurs d'alignement appliquées par défaut à chaque élément, équivalentes à définir place-self sur chacun d'eux).
Cette page couvre la syntaxe, les formes à une et deux valeurs, chaque valeur et ce qu'elle fait concrètement, ainsi que les dispositions où place-items n'a aucun effet.
Quand place-items s'applique-t-il ?
place-items ne produit un effet que dans les dispositions qui ont une notion d'« éléments » :
- Les dispositions Grid — le cas d'usage principal. Il aligne chaque élément dans sa zone de grille.
- Les boîtes positionnées en absolu — il aligne la boîte dans son bloc conteneur.
Il est ignoré dans les cas suivants, ce qui est une source fréquente de confusion :
- Les dispositions Flexbox —
justify-items(et donc la moitié inline deplace-items) ne fait rien en Flexbox. Utilisez plutôt justify-content etalign-itemsdirectement. - Les boîtes de type bloc standard.
- Les cellules de tableau.
place-items se comporte différemment selon le contexte de mise en page — la même valeur peut signifier des choses différentes dans une grille CSS Grid par rapport à un positionnement absolu. Le tableau des valeurs ci-dessous détaille chaque cas.
| Valeur initiale | normal legacy |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.placeItems = "normal"; |
Syntaxe
place-items: <align-items> <justify-items>?;Les mots-clés acceptés sont :
place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;Il existe deux formes :
- Une valeur — elle définit les deux axes.
place-items: center;signifie « centrer verticalement et centrer horizontalement ». - Deux valeurs — la première définit align-items (axe de bloc), la seconde définit justify-items (axe inline). Par exemple,
place-items: start end;signifie « en haut verticalement, à droite horizontalement ».
La spécification CSS Grid sépare les deux valeurs par un espace (place-items: start end), et non par une barre oblique. Vous pouvez encore voir une barre oblique dans des documents plus anciens ; une valeur unique est la forme la plus sûre et la mieux prise en charge.
Exemple — valeur unique (start)
Un seul mot-clé aligne les éléments sur les deux axes à la fois. Ici, start pousse l'élément vers le coin supérieur gauche de sa cellule de grille :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #1c87c9;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<h3>place-items: start</h3>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Résultat
Exemple — deux valeurs (end start)
Avec deux mots-clés, vous contrôlez chaque axe indépendamment. Ici, end start envoie l'élément en bas (axe de bloc) et à gauche (axe inline) :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: end start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>place-items: end start</h2>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Exemple — valeur center
Un seul mot-clé center centre chaque élément verticalement et horizontalement dans sa cellule de grille :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
#container {
height: 200px;
width: 230px;
place-items: center;
background-color: #ccc;
display: grid;
}
.grid {
display: grid;
}
div > div {
box-sizing: border-box;
border: 3px solid #ccc;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #666;
min-height: 40px;
}
#box2 {
background-color: #1c87c9;
min-height: 50px;
}
#box3 {
background-color: #fff;
min-height: 40px;
}
#box4 {
background-color: #ff0000;
min-height: 60px;
}
#box5 {
background-color: #eee;
min-height: 70px;
}
#box6 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<div id="container" class="grid">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Si la boîte n'a pas de parent ou est positionnée en absolu, la valeur « auto » représente « normal ». |
| normal | L'effet de cette valeur dépend du mode de mise en page : - Dans les dispositions de niveau bloc, la valeur « normal » se comporte comme « start ». - Dans les dispositions à positionnement absolu, cette valeur se comporte comme « start » pour les boîtes remplacées en positionnement absolu, et comme stretch pour toutes les autres boîtes en positionnement absolu. - Dans les dispositions de cellules de tableau, cette propriété est ignorée. - Dans les dispositions Flexbox, cette propriété est ignorée. - Dans les dispositions Grid, cette valeur se comporte comme « stretch », sauf pour les boîtes ayant un rapport d'aspect ou des tailles intrinsèques, où elle se comporte comme « start ». |
| start | Aligne l'élément sur le bord de départ de sa zone de grille (en haut sur l'axe de bloc, à gauche sur l'axe inline dans une disposition de gauche à droite). |
| end | Aligne l'élément sur le bord de fin de sa zone de grille (en bas sur l'axe de bloc, à droite sur l'axe inline dans une disposition de gauche à droite). |
| self-start | L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de départ. |
| self-end | L'élément est autorisé à se placer sur le bord du conteneur en fonction de son propre côté de fin. |
| center | Les éléments sont positionnés les uns à côté des autres vers le centre du conteneur. |
| left | Les éléments sont placés les uns à côté des autres vers le côté gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe inline, cette valeur se comporte comme « end ». |
| right | Les éléments sont placés les uns à côté des autres vers le côté droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe inline, cette valeur se comporte comme « start ». |
| baseline | Aligne tous les éléments d'un groupe en faisant correspondre leurs lignes de base d'alignement. |
| first baseline | Aligne la première ligne de base de l'élément avec la première ligne de base de la rangée. |
| last baseline | Aligne la dernière ligne de base de l'élément avec la dernière ligne de base de la rangée. |
| stretch | Étire l'élément jusqu'aux deux bords du conteneur verticalement et horizontalement pour s'adapter au conteneur. |
| initial | Donne à la propriété sa valeur par défaut. |
| inherit | Hérite de la propriété depuis son élément parent. |
Propriétés associées
- align-items — la moitié axe de bloc de ce raccourci.
- justify-items — la moitié axe inline de ce raccourci.
- grid — la disposition où
place-itemsest le plus utile. - justify-content — ce qu'il faut utiliser à la place dans Flexbox.