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
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die 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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	iOS Safari	Samsung Internet
Grundlegende Unterstützung	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	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 12	Firefox Android Vollständige Unterstützung 52	Opera Android Vollständige Unterstützung 12.1	Safari iOS Vollständige Unterstützung 9.2	Samsung 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

CSS flexible Boxen verwenden