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>

Versuch es selber!

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>

Versuch es selber!

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.


59.0+	✕	45.0+	?	?

59.0+

45.0+

CSS-Eigenschaft place-items

Syntax

Beispiel

Beispiel

Werte

Browser-Support

Übe dein Wissen