Propriété CSS place-items
La propriété CSS place-items est un raccourci pour les propriétés suivantes :
Ces propriétés sont principalement utilisées avec les mises en page Grid et les éléments positionnés de manière absolue. Notez que place-items est ignoré dans les mises en page Flexbox et n'affecte pas les boîtes de niveau bloc standard ni les cellules de tableau.
INFO
La propriété place-items se comporte différemment selon le contexte d'utilisation.
Découvrez le comportement de la propriété place-items dans différents contextes ci-dessous.
| Valeur initiale | normal legacy |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.placeItems = "normal"; |
Syntaxe
Syntaxe CSS de place-items
css
place-items: <align-items> [ / <justify-items> ]?;
/* Expanded values */
place-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;Note : Lorsqu'une seule valeur est utilisée, elle s'applique aux deux axes. Lorsqu'il y a deux valeurs séparées par une barre oblique (
/), la première définitalign-itemset la seconde définitjustify-items.
Exemple de la propriété place-items :
Exemple de code CSS pour place-items
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: flex-end;
background-color: #ccc;
display: grid;
}
.grid {
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: flex-end</h3>
<div id="container" class="grid">
<div id="box1">1</div>
</div>
</body>
</html>Résultat
Exemple de la propriété place-items avec la valeur "center" :
Autre exemple de code CSS pour place-items
html
<!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 de manière absolue, la valeur "auto" équivaut à "normal". |
| normal | L'effet de cette valeur dépend du mode de mise en page : - Dans les mises en page de niveau bloc, la valeur "normal" se comporte comme "start". - Dans les mises en pages à position absolue, cette valeur se comporte comme "start" pour les boîtes remplacées positionnées de manière absolue, et comme stretch pour toutes les autres boîtes positionnées de manière absolue. - Dans les mises en pages de cellules de tableau, cette propriété est ignorée. - Dans les mises en pages Flexbox, cette propriété est ignorée. - Dans les mises en pages Grid, cette valeur se comporte comme "stretch", sauf pour les boîtes ayant un ratio d'aspect ou des dimensions intrinsèques, où elle se comporte comme "start". |
| start | Tous les éléments sont positionnés les uns contre les autres sur le bord de départ (gauche) du conteneur. |
| end | Tous les éléments sont positionnés les uns contre les autres sur le bord de fin (droite) du conteneur. |
| flex-start | Les éléments sont placés au début du conteneur. |
| flex-end | Les éléments sont placés à la fin du conteneur. |
| self-start | L'élément peut se placer sur le bord du conteneur en fonction de son propre côté de départ. |
| self-end | L'élément peut 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 en ligne, 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 en ligne, cette valeur se comporte comme "start". |
| baseline | Aligner tous les éléments d'un groupe en faisant correspondre leurs lignes de base d'alignement. |
| first baseline | Aligner la première ligne de base de l'élément avec la première ligne de base de la ligne. |
| last baseline | Aligner la dernière ligne de base de l'élément avec la dernière ligne de base de la ligne. |
| stretch | Étirer l'élément sur les deux bords du conteneur verticalement et horizontalement pour s'adapter au conteneur. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété 'place-items' en CSS ?