Proprietà CSS flex-wrap
La proprietà CSS flex-wrap definisce se gli elementi devono andare a capo o meno. Guarda esempi con diversi valori.
La proprietà flex-wrap controlla se gli elementi in un flex container vengono forzati su una singola riga o possono andare a capo su più righe. Per impostazione predefinita, un flex container cerca di far stare tutti i suoi elementi su una riga, anche se questo significa restringerli o farli traboccare. Impostare flex-wrap: wrap consente agli elementi di fluire su nuove righe quando non c'è spazio sufficiente.
Questa è la proprietà a cui si ricorre quando una riga di card, tag o link di navigazione deve adattarsi elegantemente su schermi stretti invece di traboccare o essere compressa.
flex-wrap influisce solo sugli elementi che sono flex item, quindi non ha effetto a meno che il genitore abbia display: flex (o display: inline-flex). Se un flex container non ha elementi, la proprietà non fa nulla.
La proprietà flex-wrap è una delle proprietà CSS3 e si abbina strettamente a flex-direction: insieme vengono comunemente scritte come la shorthand flex-flow.
Questo capitolo spiega ogni valore di flex-wrap, come il wrapping interagisce con l'asse principale e i problemi da tenere d'occhio.
| Valore iniziale | nowrap |
|---|---|
| Si applica a | Flex container. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.flexWrap = "wrap-reverse"; |
Come funziona il wrapping
Il wrapping avviene lungo l'asse trasversale, perpendicolare all'asse principale definito da flex-direction:
- Con il valore predefinito
flex-direction: row, gli elementi si dispongono da sinistra a destra. Quandoflex-wrap: wrapè attivo e gli elementi esauriscono lo spazio orizzontale, l'elemento successivo inizia una nuova riga in basso. - Con
flex-direction: column, gli elementi si accumulano dall'alto verso il basso e il wrapping sposta gli elementi in eccesso in una nuova colonna accanto alla prima.
Una conseguenza fondamentale: quando flex-wrap è nowrap (il valore predefinito), i flex item si restringono per adattarsi al container (entra in gioco il loro flex-shrink) o ne traboccano. Solo una volta che il wrapping è consentito gli elementi mantengono le loro dimensioni preferite e si spostano su una nuova riga.
Quando gli elementi vanno a capo su più righe, lo spazio tra quelle righe è controllato da align-content, mentre l'allineamento degli elementi all'interno di una singola riga è controllato da align-items. Su una singola riga senza wrapping, align-content non ha effetto.
Sintassi
Sintassi della proprietà CSS flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Esempio della proprietà flex-wrap con il valore "wrap":
Il container qui sotto è largo 200px e contiene sei box da 50px (300px di contenuto). Con flex-wrap: wrap, i box che non trovano spazio nella prima riga scendono in una seconda riga invece di restringersi:
Esempio della proprietà CSS flex-wrap con il valore wrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Esempio della proprietà flex-wrap con il valore "nowrap":
Con il valore predefinito nowrap, gli stessi sei box vengono forzati su una singola riga. Poiché non c'è spazio per tutti, vengono compressi a una larghezza inferiore ai 50px dichiarati:
Esempio della proprietà CSS flex-wrap con il valore nowrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Risultato
Esempio della proprietà flex-wrap con il valore "wrap-reverse":
wrap-reverse consente anche agli elementi di fluire su più righe, ma inverte la direzione dell'asse trasversale: le righe si accumulano verso l'alto invece che verso il basso, quindi la prima riga appare in fondo:
Esempio della proprietà CSS flex-wrap con il valore wrap-reverse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| nowrap | Definisce che i flex item non andranno a capo. Questo è il valore predefinito della proprietà. | Prova » |
| wrap | Definisce che i flex item andranno a capo quando necessario. | Prova » |
| wrap-reverse | Definisce che i flex item andranno a capo in ordine inverso quando necessario. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Shorthand flex-flow
Poiché flex-wrap viene quasi sempre impostato insieme a flex-direction, CSS fornisce la shorthand flex-flow per entrambi contemporaneamente:
/* flex-direction flex-wrap */
flex-flow: row wrap;Questo equivale a scrivere flex-direction: row; e flex-wrap: wrap; separatamente.
Proprietà correlate
display— impostadisplay: flexsul genitore per creare il flex container su cui agisceflex-wrap.flex-direction— imposta l'asse principale (riga o colonna) attorno al quale il wrapping ridispone gli elementi.align-content— distribuisce lo spazio tra le righe in cui gli elementi sono andati a capo (rilevante solo quando gli elementi si dispongono su più righe).justify-content— allinea gli elementi lungo l'asse principale.flex— controlla come i singoli elementi crescono e si restringono per riempire ogni riga.