De flex-wrapeigenschap is een subeigenschap van de module Flexible Box Layout.
Het bepaalt of de flexitems in een enkele regel worden gedwongen of in meerdere regels kunnen worden gestroomd. Indien ingesteld op meerdere lijnen, definieert het ook de dwarsas die de richting bepaalt waarin nieuwe lijnen worden gestapeld.
Ter herinnering: de dwarsas is de as loodrecht op de hoofdas. De richting hangt af van de richting van de hoofdas.
De flex-wrapeigenschap accepteert 3 verschillende waarden:
nowrapwrap: meerdere regels, richting wordt bepaald doorflex-directionwrap-reverse: meerdere regels, tegengesteld aan de richting bepaald doorflex-direction
Syntaxis
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
In de volgende demo:
- De rode lijst is ingesteld op
nowrap - De gele lijst is ingesteld op
wrap - De blauwe lijst is ingesteld op
wrap-reverse
Let op: het flex-directionis ingesteld op de standaardwaarde: row.
Zie de Pen Flex-wrap: demo door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.