La flex-wrapproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.
Definisce se gli elementi flessibili sono forzati in una singola riga o possono essere inseriti in più righe. Se impostato su più linee, definisce anche l'asse trasversale che determina la direzione in cui vengono impilate le nuove linee.
Promemoria: l'asse trasversale è l'asse perpendicolare all'asse principale. La sua direzione dipende dalla direzione dell'asse principale.
La flex-wrapstruttura accetta 3 diversi valori:
nowrap( impostazione predefinita ): riga singola che può causare l'overflow del contenitorewrap: linee multiple, la direzione è definita daflex-directionwrap-reverse: linee multiple, opposte alla direzione definita daflex-direction
Sintassi
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
Nella seguente demo:
- La lista rossa è impostata su
nowrap - La lista gialla è impostata su
wrap - La lista blu è impostata su
wrap-reverse
Nota: il flex-directionè impostato al valore di default: row.
Guarda il Pen Flex-wrap: demo di CSS-Tricks (@ css-tricks) su CodePen.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Per ulteriori informazioni su come mescolare le sintassi per ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).