CSS/Eigenschaften/place-content

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
Defaultwert
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

Weblinks