Ü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
Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!
| 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 |