Übersicht

Die flex-wrap CSS Eigenschaft legt fest, ob die Elemente in einem Flexbox-Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können.

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

Siehe die CSS flexible Boxen verwenden für mehr Informationen.

Syntax

Formale Syntax: nowrap | wrap | wrap-reverse
flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

flex-wrap: inherit

Werte

Die folgenden Werte können verwendet werden:

nowrap
Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.
wrap
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten).
wrap-reverse
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).

Beispiele

element {
  flex-wrap: nowrap;
}

Spezifikationen

Spezifikation Status Anmerkung
CSS Flexible Box Layout Module
Die Definition von 'flex-wrap' in dieser Spezifikation.
Anwärter Empfehlung  

Browser Kompatibilität

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 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 28IE Teilweise Unterstützung 11
Hinweise
Teilweise Unterstützung 11
Hinweise
Hinweise Partial support due to large number of bugs present. See Flexbugs.
Opera Vollständige Unterstützung 17Safari Vollständige Unterstützung 9WebView 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 12Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 12.1Safari iOS Vollständige Unterstützung 9.2Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
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: SJW, brainscript, fscholz, Sebastianz
Zuletzt aktualisiert von: SJW,