justify-content

Ü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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Flex LayoutChrome 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 — 20
Deaktiviert
Deaktiviert From version 18 until version 20 (exclusive): 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 9
Vollständige Unterstützung 9
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView 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 ≤37
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-
Firefox Android 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 — 20
Deaktiviert
Deaktiviert From version 18 until version 20 (exclusive): 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.
Opera Android Vollständige Unterstützung 12.1Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung Ja
baselineChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Keine Unterstützung 45 — 60
Hinweise
Keine Unterstützung 45 — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Keine Unterstützung 45 — 60
Hinweise
Keine Unterstützung 45 — 60
Hinweise
Hinweise justify-content no longer accepts baseline values
Opera Android ? Safari iOS Keine Unterstützung NeinSamsung 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 Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android 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 Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
left and rightChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Opera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari Vollständige Unterstützung 9WebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Firefox Android Vollständige Unterstützung 52Opera Android ? Safari iOS Vollständige Unterstützung 9Samsung Internet Android ?
safe and unsafeChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
WebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Firefox Android Vollständige Unterstützung 63Opera Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari iOS Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Samsung Internet Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
space-evenlyChrome Vollständige Unterstützung 60Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 47Safari Vollständige Unterstützung 11WebView Android Vollständige Unterstützung 60Chrome Android Vollständige Unterstützung 60Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 44Safari iOS Vollständige Unterstützung 11Samsung Internet Android Keine Unterstützung Nein
start and endChrome Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 45IE Keine Unterstützung NeinOpera Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari Vollständige Unterstützung 9WebView Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Chrome Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Firefox Android Vollständige Unterstützung 45Opera Android ? Safari iOS Vollständige Unterstützung 9Samsung Internet Android ?
stretchChrome Vollständige Unterstützung 57Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57Firefox Android Vollständige Unterstützung 52Opera Android ? Safari iOS Vollständige Unterstützung 9Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige 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 AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Grid LayoutChrome Vollständige Unterstützung 57Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 52Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.2

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

[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