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>

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>

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.

Support de Navigateurs

59.0+ 45.0+ ? ?


Trouvez-vous cela utile?

Articles Associées