Übersicht

Die justify-content CSS Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Elemente verteilt, wenn Flexelemente an der Hauptachse der aktuellen Zeile ausgerichtet werden sollen. Die Ausrichtung wird berechnet, nachdem die Längen und automatischen Abstände angewendet wurden, was bedeutet, dass falls es mindestens ein flexibles Element gibt mit flex-grow ungleich 0, hat diese Eigenschaft keine Auswirkung, da es keinen verfügbaren Platz gibt.

Hinweis: Es sollte nicht angenommen werden, dass diese Eigenschaft ausschließlich auf Flexcontainer angewandt wird. Daher sollte sie nicht einfach durch Setzen eines anderen display Wertes versteckt werden. Die CSSWG arbeitet daran, deren Verwendung auf alle Blockelemente auszuweiten. Diese Entwurfsspezifikation ist bisher noch in einer frühen Entwicklungsphase und bisher noch nicht implementiert.

Initialwertnormal
Anwendbar aufflexible Container
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

Syntax

/* Packe Flexelemente an den Start */
justify-content: flex-start;

/* Packe Flexelemente an das Ende */
justify-content: flex-end;

/* Packe Flexelemente um die Mitte */
justify-content: center;

/* Verteile die Elemente gleichmäßig
Das erste Element an den Start, das letzte an das Ende */
justify-content: space-between;

/* Verteile die Elemente gleichmäßig
Elemente haben gleiche Abstände um sie herum */
justify-content: space-around;

/* Globale Werte */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

Werte

flex-start
Die Flexelemente werden an den Hauptstartpunkt gepackt. Die Außenabstände des ersten Flexelements grenzen an den Startrand der Zeile und jedes weitere Flexelement an das folgende.
flex-end
Die Flexelemente werden an den Hauptendpunkt gepackt. Außenabstände des letzten Flexelements grenzen an den Endrand der Zeile und jedes weitere Flexelement an das folgende.
center
Die Flexelemente werden in die Mitte der Zeile gepackt. Die Flexelemente grenzen aneinander und werden in der Mitte der Zeile ausgerichtet. Die Leerräume zwischen dem Hauptstartrand und dem ersten Element und zwischen dem Hauptendrand und dem letzten Element sind gleich.
space-between
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Hauptstartrand und -endrand einer Zeile grenzen an den Rand des ersten bzw. letzten Flexelements.
space-around
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt, sodass die Leerräume zwischen zwei angrenzenden Elementen gleich sind. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Elementen.

Formale Syntax

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

wobei
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

Beispiele

HTML:

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

#container > div {
  display: flex;
  font-family: Courier New, Lucida Console, monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

Ergibt:

Spezifikationen

Spezifikation Status Kommentar
CSS Flexible Box Layout Module
Die Definition von 'justify-content' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Support im Flex-Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 52
Vollständige Unterstützung 52
Teilweise Unterstützung 29
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung 21
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 20
Hinweise
Vollständige Unterstützung 20
Hinweise
Hinweise Before Firefox 27, Firefox supported only single-line flexbox.
Keine Unterstützung 18 — ?
Deaktiviert
Deaktiviert From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 48
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 11Opera Vollständige Unterstützung 12.1Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Teilweise Unterstützung 4.4
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Teilweise Unterstützung 29
Hinweise
Hinweise Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android ? Opera Android Vollständige Unterstützung 12.1Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
space-evenlyChrome Vollständige Unterstützung 60Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
start and endChrome Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung JaIE Keine Unterstützung NeinOpera Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung ? — 52
Hinweise
Hinweise This value is recognized, but has no effect.
IE Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise This value is recognized, but has no effect.
Opera Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise This value is recognized, but has no effect.
Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung ? — 52
Hinweise
Hinweise This value is recognized, but has no effect.
Opera Android ? Safari iOS ? Samsung Internet Android ?
baselineChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Keine Unterstützung ? — 60
Hinweise
Keine Unterstützung ? — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
IE Keine Unterstützung NeinOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung ? — 60
Hinweise
Keine Unterstützung ? — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android ?
first baseline and last baselineChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung 52 — 60
Hinweise
Keine Unterstützung 52 — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung 52 — 60
Hinweise
Keine Unterstützung 52 — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
stretchChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 63Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Support im Grid-Layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 57Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52IE ? Opera Vollständige Unterstützung 44Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 52Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.2

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

[1] Firefox unterstützt nur einzeiliges Flexbox Layout bis Version 28. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, fscholz, Sebastianz
Zuletzt aktualisiert von: SJW,