flex-wrapProprietatea este o sub-proprietate a modulului flexibil Box Layout.
Acesta definește dacă elementele flexibile sunt forțate într-o singură linie sau pot fi curgate în mai multe linii. Dacă este setat la mai multe linii, acesta definește și axa transversală care determină direcția în care sunt stivuite noile linii.
Memento: axa transversală este axa perpendiculară pe axa principală. Direcția sa depinde de direcția axei principale.
flex-wrapProprietatea acceptă 3 valori diferite:
nowrap( implicit ): o singură linie care poate cauza revărsarea containeruluiwrap: multi-linii, direcția este definită deflex-directionwrap-reverse: multi-linii, opuse direcției definite deflex-direction
Sintaxă
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
În următoarea demonstrație:
- Lista roșie este setată la
nowrap - Lista galbenă este setată la
wrap - Lista albastră este setată la
wrap-reverse
Notă: flex-directioneste setată la valoarea implicită: row.
Vedeți Pen Flex-wrap: demo de CSS-Tricks (@ css-tricks) pe CodePen.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, vă rugăm să consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).