Summary

Die Kurzschreibweise flex-flow fasst die Eigenschaften flex-direction und flex-wrap zusammen.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufflexible Container
VererbtNein
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Siehe Using CSS flexible boxes für mehr Information.

Syntax

<'flex-direction'> || <'flex-wrap'>

Werte

Siehe flex-direction und flex-wrap.

Beispiele

element { 
  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
  flex-flow: column-reverse wrap;            
}

Spezifikation

Spezifikation Status Anmerkung
CSS Flexible Box Layout Module Anwärter Empfehlung  

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
flex-flowChrome 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 12Firefox 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 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: 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.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari 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 Ja
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-
Edge Mobile Vollständige Unterstützung JaFirefox 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 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: 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.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 9.2
Vollständige Unterstützung 9.2
Vollständige Unterstützung 7.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, udvlp, fscholz, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,