Die flex-wrapEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.
Es definiert, ob die Flex-Elemente in einer einzelnen Zeile erzwungen werden oder in mehrere Zeilen fließen können. Bei der Einstellung auf mehrere Linien wird auch die Querachse definiert, die die Richtung bestimmt, in der neue Linien gestapelt werden.
Erinnerung: Die Querachse ist die Achse senkrecht zur Hauptachse. Seine Richtung hängt von der Richtung der Hauptachse ab.
Die flex-wrapEigenschaft akzeptiert 3 verschiedene Werte:
nowrap( Standard ): Einzeilig, wodurch der Container überlaufen kannwrap: mehrzeilig, Richtung wird definiert durchflex-directionwrap-reverse: mehrzeilig, entgegengesetzt zu der durch definierten Richtungflex-direction
Syntax
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
In der folgenden Demo:
- Die rote Liste ist auf gesetzt
nowrap - Die gelbe Liste ist auf gesetzt
wrap - Die blaue Liste ist auf gesetzt
wrap-reverse
Hinweis: Der flex-directionWert ist auf den Standardwert eingestellt : row.
Siehe die Pen Flex-Wrap: Demo von CSS-Tricks (@ css-Tricks) auf CodePen.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).