CSS/Eigenschaften/place-items

Browserunterstützung
caniuse.com

Die Eigenschaft place-items ist die shorthand-Eigenschaft, die die Elemente in einem relevanten Layoutsystem wie Grid oder Flexbox gleichzeitig in Block- und Inline-Richtung ausrichtet (d. h. mit den Eigenschaften align-items und justify-items). Hierbei geht es um die Ausrichtung innerhalb der jeweiligen Layoutzeile oder -spalte. Die Layoutzeilen oder -spalten selbst werden mittels place-content, justify-content und align-content ausgerichtet.

place-items akzeptiert ein oder zwei Schlüsselwortparameter. Der erste Wert bezieht sich auf die Block- oder Querachse (align-items), der zweite Wert auf die Inlineachse (justify-items). Da das Flexbox-Layout die justify-items Eigenschaft nicht kennt, wird der zweite Wert für Flexboxen ignoriert.

Erlaubte Werte

• start (flex-start): alle Elemente werden am Anfang der Achse angeordnet, am Ende bleibt ggf. ein Abstand
• end (flex-end): alle Elemente werden beginnend vom Ende der Achse angeordnet, am Anfang bleibt ggf. ein Abstand
• center: alle Elemente werden in der Mitte der Achse angeordnet, am Anfang und am Ende bleibt ggf. derselbe Abstand
• left: richtet Elemente am logischen linken Rand der Achse aus
• right: richtet Elemente am logischen rechten Rand der Achse aus
• space-around: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element haben jeweils den halben Abstand zum Elternelement
• space-between: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
• space-evenly: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element haben jeweils auch diesen Abstand zum Elternelement
• normal: Die Elemente werden so verteilt, als wäre justify-content nicht gesetzt
• stretch (nur für grid): Die Elemente werden (ggf. unproportional) so angepasst, dass sie den Container komplett ausfüllen.
• zusätzlich safe oder unsafe, was steuert, ob ein „Überlaufen“ des Elterncontainers (was unsichtbare Inhalte bedeuten könnte) verhindert werden soll oder nicht.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

flexible Container, Rasterelemente (Grid Layout)

Vererbung

nein

animierbar

nein

Beispiel

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

Der Inhalt wird mittig zentriert.

Beachten Sie: Ist der zweite Wert nicht vorhanden, wird der erste Wert für beide verwendet, vorausgesetzt, er ist für beide ein gültiger Wert. Ist er für den einen oder den anderen ungültig, ist der gesamte Wert ungültig.

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#Ausrichtung des Gestaltungsrasters

Weblinks

• Spezifikation (WHATWG): CSS Flexible Box Layout Module Level 3 - place-content-property
• MDN: place-content
• Details: caniuse.com