Propriété CSS place-items

La propriété CSS place-items est une propriété raccourcie pour les propriétés suivantes:

Les propriétés mentionnées ci-dessus ont obtenu l'usage avec l'introduction de Flexbox et les dispositions en grille, mais elles sont également appliquées aux:

boîtes positionnées de façon absolue
boîtes du niveau bloc
position statique des boîtes positionnées de façon absolue
cellules de tableaux

La propriété place-items se comporte différement selon le contexte de l'utilisateur.

Lisez sur le comportement de la propriété place-items en contextes différents ci-dessous.

Valeur initiale	normal legacy
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.placeItemsw = "normal";

Syntaxe

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;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      #container {
      height:150px;
      width: 150px;
      place-items: flex-end; 
      background-color: #ccc;
      }
      .flex {
      display: flex;
      flex-wrap: wrap;
      }
      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>Exemple de la propriété place-items</h2>
    <h3>place-items: flex-end</h3>
    <div id="container" class="flex">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la propriété place-items:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
    <style> 
      #container {
      height:200px;
      width: 230px;
      place-items: center; 
      background-color: #ccc;
      }
      .flex {
      display: flex;
      flex-wrap: wrap;
      }
      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>Exemple de la propriété place-items </h2>
    <div id="container" class="flex">
      <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>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Si la boîte n'a aucun parent, ou si elle est positionnée de façon absolue, la valeur "auto" répresente "normal".
normal	L'effet de cette valeur dépend du mode de la disposition: Pour les disposition en bloc, la valeur "normal" se comporte comme "start". Pour les dispositions positionnées de façon absolue, cette valeur se comporte comme "start" sur les boîtes positionnées de façon absolue qui sont remplacées, et comme "stretch" sur toutes les autres boîtes positionnées de façon absolue. Pour les dispositon de cellules de tableaux, cette propriété est ignorée. Pour les dispositions utilisant des boîtes flexibles, cette propriété est ignorée. Pour les dispositions en grille, cette valeur se comporte comme "stretch", sauf pour les boîtes qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas elle se comporte comme "start".
start	Tous les éléments sont positionnés l'un contre l'autre sur le bord du début (gauche) du conteneur.
end	Tous les éléments sont positionnés l'un contre l'autre sur le bord de la fin (droit) du conteneur.
flex-start	Éléments sont placés au début du conteneur.
flex-end	Éléments sont placés à la fin du conteneur.
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 la fin.
center	Éléments sont positionnés l'un à côté de l'autre vers le milieu du conteneur.
left	Éléments sont placés l'un à côté de l'autre 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	Éléments sont placés l'un à côté de l'autre 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 first-baseline last-baseline	Aligne tous les éléments dans un groupe par rapport à l'alignement des lignes de base.
stretch	Élargit l'élément aux deux bords du conteneur verticalement et horizontalement pour l'insérer dans le conteneur.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.