Ü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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-wrap | Chrome
Vollständige Unterstützung
29
| Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 28 | IE
Teilweise Unterstützung
11
| Opera Vollständige Unterstützung 17 | Safari Vollständige Unterstützung 9 | WebView Android
Vollständige Unterstützung
4.4
| Chrome Android
Vollständige Unterstützung
29
| Edge Mobile Vollständige Unterstützung 12 | Firefox Android Vollständige Unterstützung 52 | Opera Android Vollständige Unterstützung 18 | 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.