flex-wrap

Ü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.

Initialwert	`nowrap`
Anwendbar auf	flexible Container
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`flex-wrap`	Chrome 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	Firefox Vollständige Unterstützung 28	IE 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 17	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 ≤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 52	Opera Android Vollständige Unterstützung 18	Safari 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 2.0 Vollständige Unterstützung 2.0 Vollständige Unterstützung 1.5 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-

Legende

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

CSS flexible Boxen verwenden