CSS/Eigenschaften/justify-content

Browserunterstützung
caniuse.com

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

• start: alle Elemente werden beginnend vom Anfang der Hauptachse angeordnet, am Ende bleibt ggf. ein Abstand
• end: alle Elemente werden beginnend vom Ende der Hauptachse angeordnet, am Anfang bleibt ggf. ein Abstand
• flex-start und flex-end: Historisch bedingte Synonyme für start und end in Flex-Containern
• 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-Container): 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

.verteilt { justify-content: space-between; }

Die flexiblen Elemente werden mit Abständen verteilt angeordnet.

Siehe auch

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

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - justify-content-property
• MDN: justify-content
• Details: caniuse.com