Den flex-wrap
egenskab er en sub-egenskab af Flexible Box layout modul.
Den definerer, om flex-elementerne tvinges i en enkelt linje eller kan strømme ind i flere linjer. Hvis den er indstillet til flere linjer, definerer den også tværaksen, der bestemmer retningen, som nye linjer stables i.
Påmindelse: tværaksen er aksen vinkelret på hovedaksen. Dens retning afhænger af hovedaksen retning.
Den flex-wrap
ejendom accepterer 3 forskellige værdier:
nowrap
( standard ): enkeltlinie, som kan få containeren til at løbe overwrap
: flere linjer, retning er defineret afflex-direction
wrap-reverse
: flere linjer, modsat retning defineret afflex-direction
Syntaks
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )
Demo
I følgende demo:
- Den røde liste er indstillet til
nowrap
- Den gule liste er indstillet til
wrap
- Den blå liste er indstillet til
wrap-reverse
Bemærk: flex-direction
er indstillet til standardværdien: row
.
Se Pen Flex-wrap: demo af CSS-Tricks (@ css-tricks) på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
21 * | 28 | 11 | 12 | 6,1 * |
Mobil / tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 4.4 | 7,0-7,1 * |
For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).