Ü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 |
| Animierbar | Nein |
| 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 inerhalb des Containers in mehrere Zeilen aufteilen (nach unten).
wrap-reverse- Die flexiblen Elemente können sich wenn nötig inerhalb 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. |
Last Call Working Draft |
Browser Kompatibilität
| Merkmal | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 28.0 | 21.0-webkit | Nicht unterstützt | 12.10 | Nicht unterstützt |
| Merkmal | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Grundlegende Unterstützung | 28.0 | ? | Nicht unterstützt | 12.10 | Nicht unterstützt |