CSS/Eigenschaften/place-content

Browserunterstützung
caniuse.com

Die Eigenschaft place-content ist die shorthand-Eigenschaft, die Inhalte in einem relevanten Layoutsystem wie Grid oder Flexbox gleichzeitig in Block- und Inline-Richtung ausrichtet (d. h. mit den Eigenschaften align-content und justify-content).

Erlaubte Werte

• start:
• end:
• flex-start: alle Elemente werden beginnend vom Anfang der Hauptachse angeordnet, am Ende bleibt ggf. ein Abstand
• flex-end: alle Elemente werden beginnend vom Ende der Hauptachse angeordnet, am Anfang bleibt ggf. ein Abstand
• center: alle Elemente werden beginnend von der Mitte der Hauptachse aus angeordnet, am Anfang und am Ende bleibt ggf. derselbe Abstand
• left:
• right
• 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