align-content

Übersicht

Die align-content CSS Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.

Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.

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

Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

Syntax

/* Packe Zeilen an den Start der Querachse */
align-content: flex-start;

/* Packe Zeilen an das Ende der Querachse */
align-content: flex-end;

/* Packe Zeilen um die Mitte der Querachse */
align-content: center;

/* Verteile Zeilen entlang der Querachse, Start und Ende */
align-content: space-between;

/* Verteile Zeilen gleichmäßig entlang der Querachse */
align-content: space-around;

/* Strecke Zeilen, um die gesamte Querachse auszufüllen */
align-content: stretch;

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

Werte

flex-start
Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.
flex-end
Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.
center
Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.
space-between
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.
space-around
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.
stretch
Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.

Formale Syntax

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

wobei
<baseline-position> = [ first | last ]? baseline
<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>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

#container > div {
  display: flex;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}

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

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

#center {
  align-content: center;
}

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

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

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

#stretch {
  align-content: stretch;
}

Ergibt:

Spezifikationen

Spezifikation Status Kommentar
CSS Flexible Box Layout Module
Die Definition von 'align-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 29
Vollständige Unterstützung 29
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 28
Vollständige Unterstützung 28
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 4.4
Vollständige Unterstützung 4.4
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 29
Vollständige Unterstützung 29
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 28
Vollständige Unterstützung 28
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 7
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 Vollständige Unterstützung 45IE 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 45Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 9Samsung Internet Android Vollständige Unterstützung 7.0
first baseline and last baselineChrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 52IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Vollständige Unterstützung 11WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 52Opera Android Keine Unterstützung NeinSafari iOS Vollständige Unterstützung 11Samsung 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 Keine Unterstützung 52 — 60
Hinweise
Keine Unterstützung 52 — 60
Hinweise
Hinweise align-content no longer accepts the left and right values
IE 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 NeinWebView 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 Keine Unterstützung 52 — 60
Hinweise
Keine Unterstützung 52 — 60
Hinweise
Hinweise align-content no longer accepts the left and right values
Opera 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 NeinSamsung Internet Android Vollständige Unterstützung Ja
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 Keine Unterstützung NeinWebView 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 Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise This value is recognized, but has no effect.
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
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 Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 9Samsung Internet Android Vollständige Unterstützung 7.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
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

Siehe auch