CSS-Eigenschaft place-items

Die CSS-Eigenschaft place-items ist eine Abkürzung für die folgenden Eigenschaften:

Die oben erwähnten Eigenschaften haben mit der Einführung von Flexbox- und Grid-Layouts an Bedeutung gewonnen, werden aber auch angewendet:

  • absolut positionierte Boxen
  • block-level Boxen
  • statische Position der absolut positionierten Boxen
  • Tabellenzellen
Die Eigenschaft place-items verhält sich je nach Benutzerkontext unterschiedlich.

Lesen Sie mehr über das Verhalten der Eigenschaft place-items in verschiedenen Kontexten.

Anfangswert normal legacy
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.placeItemsw = "normal";

Syntax

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;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft place-items</h2>
    <h3>place-items: flex-end</h3>
    <div id="container" class="flex">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Ein anderes Beispiel mit der Eigenschaft place-items:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft 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>

Werte

Wert Beschreibung
auto Wenn die Box kein übergeordnetes Element hat oder absolut positioniert ist, stellt der Wert "auto" "normal" dar.
normal Die Wirkung dieses Wertes hängt vom Layoutmodus ab:
  • In Layouts auf Blockebene verhält sich der Wert "normal" wie "start".
  • In absolut positionierten Layouts verhält sich dieser Wert wie "start" bei ersetzten absolut positionierten Boxen und wie "stretch" bei allen anderen absolut positionierten Boxen..
  • In Tabellenzellen-Layouts wird diese Eigenschaft ignoriert.
  • In Flexbox-Layouts wird diese Eigenschaft ignoriert.
  • In Gitterlayouts verhält sich dieser Wert wie "stretch" mit Ausnahme von Boxen mit einem Seitenverhältnis oder einer Eigengröße, bei denen er sich wie "start" verhält.
start Alle Elemente sind am Anfangsrand (links) des Containers gegeneinander positioniert.
end Alle Elemente sind auf der Endkante (rechts) des Containers gegeneinander positioniert.
flex-start Die Items werden am Anfang des Containers platziert.
flex-end Die Items werden am Ende des Containers platziert.
self-start Der Item darf sich auf der Containerkante aufgrund seiner eigenen Ausgangsseite platzieren.
self-end Der Item darf sich auf der Containerkante aufgrund seiner eigenen Endseite platzieren.
center Die Items werden nebeneinander in der Mitte des Containers positioniert.
left Die Items werden zur linken Seite des Containers nebeneinander platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie der Wert "end".
right Die Items werden nebeneinander auf der rechten Seite des Containers platziert. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse ist, verhält sich dieser Wert wie der Wert "start".
Baseline first-baseline last-baseline Richtet alle Elemente innerhalb einer Gruppe aus, indem sie ihre Ausrichtungsbaselines abgleicht.
stretch Dehnt das Element an beiden Rändern des Containers vertikal und horizontal, um den Container anzupassen.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
59.0+ 45.0+ ? ?

Übe dein Wissen

In Bezug auf die CSS-Eigenschaft 'place-items', welche Aussagen sind wahr?
Finden Sie das nützlich?