CSS/Eigenschaften/justify-content

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft justify-content definiert, wie der Platz zwischen Inhaltselementen entlang der Hauptachse eines Flex-Containers bzw. entlang der inline-Achse eines Grid-Containers verteilt wird.

erlaubte Werte
  • 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
  • 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-around: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element haben jeweils den halben Abstand zum Elternelement
  • 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) (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
.verteilt { justify-content: space-between; }
Die flexiblen Elemente werden mit Abständen verteilt angeordnet.


Weblinks

Siehe auch