CSS place-items-Eigenschaft

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

Diese Eigenschaften werden hauptsächlich für Grid-Layouts und absolut positionierte Elemente verwendet. Beachten Sie, dass place-items in Flexbox-Layouts ignoriert wird und keine Auswirkung auf standardmäßige Block-Boxen oder Tabellenzellen hat.

INFO

Die place-items-Eigenschaft verhält sich je nach Benutzerkontext unterschiedlich.

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

Anfangswert	normal legacy
Anwendbar auf	Alle Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.placeItems = "normal";

Syntax

CSS place-items-Syntax

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;

Hinweis: Bei Verwendung eines einzelnen Werts gilt dieser für beide Achsen. Bei Verwendung von zwei Werten, die durch einen Schrägstrich (/) getrennt sind, legt der erste Wert align-items und der zweite justify-items fest.

Beispiel für die place-items-Eigenschaft:

CSS place-items-Codebeispiel

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>

Try it Yourself »

Ergebnis

SS place-items another

Beispiel für die place-items-Eigenschaft mit dem Wert „center“:

CSS place-items weiteres Codebeispiel

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>

Try it Yourself »

Werte

Wert	Beschreibung
auto	Wenn die Box kein Elternelement hat oder absolut positioniert ist, entspricht der Wert „auto“ „normal“.
normal	Die Wirkung dieses Werts hängt vom Layout-Modus ab: - Im Block-Layout verhält sich der Wert „normal“ wie „start“. - Im absolut positionierten Layout verhält sich dieser Wert wie „start“ bei ersetzten absolut positionierten Boxen und wie „stretch“ bei allen anderen absolut positionierten Boxen. - Im Tabellenzell-Layout wird diese Eigenschaft ignoriert. - Im Flexbox-Layout wird diese Eigenschaft ignoriert. - Im Grid-Layout verhält sich dieser Wert wie „stretch“, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, wo er sich wie „start“ verhält.
start	Alle Elemente werden an der Startkante (links) des Containers aneinander ausgerichtet.
end	Alle Elemente werden an der Endkante (rechts) des Containers aneinander ausgerichtet.
flex-start	Elemente werden am Anfang des Containers platziert.
flex-end	Elemente werden am Ende des Containers platziert.
self-start	Das Element kann sich basierend auf seiner eigenen Startkante an der Containerkante positionieren.
self-end	Das Element kann sich basierend auf seiner eigenen Endkante an der Containerkante positionieren.
center	Elemente werden nebeneinander zur Mitte des Containers ausgerichtet.
left	Elemente werden nebeneinander zur linken Seite des Containers ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse verläuft, verhält sich dieser Wert wie „end“.
right	Elemente werden nebeneinander zur rechten Seite des Containers ausgerichtet. Wenn die Achse der Eigenschaft nicht parallel zur Inline-Achse verläuft, verhält sich dieser Wert wie „start“.
baseline	Richtet alle Elemente innerhalb einer Gruppe aus, indem ihre Ausrichtungsbasislinien übereinandergelegt werden.
first baseline	Richtet die erste Basislinie des Elements mit der ersten Basislinie der Zeile aus.
last baseline	Richtet die letzte Basislinie des Elements mit der letzten Basislinie der Zeile aus.
stretch	Streckt das Element vertikal und horizontal an beide Kanten des Containers, um in diesen zu passen.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was macht die 'place-items'-Eigenschaft in CSS?

Sie definiert das Standard-justify-self und align-self für alle Elemente der Box.Sie ändert die Farbe aller Elemente in der Box.Sie steuert den Abstand zwischen CSS-Grid-Zellen.Sie kombiniert zwei separate Eigenschaften zu einer Kurzschreibweise.Sie definiert den z-index für alle Elemente der Box.

CSS place-items-Eigenschaft ​

Syntax ​

Beispiel für die place-items-Eigenschaft: ​

Ergebnis ​

Beispiel für die place-items-Eigenschaft mit dem Wert „center“: ​

Werte ​