Proprietà CSS flex-flow
La proprietà CSS flex-flow è una shorthand per flex-wrap e flex-direction. Scopri questa proprietà e prova degli esempi.
La proprietà CSS flex-flow è una shorthand che imposta contemporaneamente due proprietà del flex container: flex-direction (l'asse lungo cui vengono disposti gli elementi) e flex-wrap (se gli elementi rimangono su una sola riga o vanno a capo su più righe). Invece di scrivere entrambe le dichiarazioni, le si combina in una singola riga, rendendo il CSS più conciso e l'intenzione più chiara.
Questa proprietà appartiene alle proprietà CSS3 e fa parte del modulo Flexible Box Layout. Ha effetto solo su un elemento il cui display è impostato su flex o inline-flex; su un elemento non-flex non ha alcun effetto, e se un flex container non contiene elementi flessibili non c'è nulla da disporre.
Questa pagina illustra la sintassi di flex-flow, cosa controlla ciascun valore e degli esempi eseguibili per ogni comune combinazione di direzione e wrapping.
Cosa controlla ciascun valore
flex-flow accetta un valore flex-direction e un valore flex-wrap, in qualsiasi ordine:
flex-direction— l'asse principale e l'ordine che gli elementi seguono lungo di esso:row(predefinito) — da sinistra a destra.row-reverse— da destra a sinistra.column— dall'alto verso il basso.column-reverse— dal basso verso l'alto.
flex-wrap— cosa succede quando gli elementi non rientrano in una sola riga:nowrap(predefinito) — tutti gli elementi si comprimono su una singola riga e possono restringersi.wrap— gli elementi vanno a capo su nuove righe nella stessa direzione.wrap-reverse— gli elementi vanno a capo su nuove righe nella direzione opposta dell'asse trasversale.
Poiché il valore iniziale è row nowrap, un flex container senza flex-flow impostato dispone i suoi elementi in una singola riga orizzontale.
I browser moderni supportano la proprietà flex-flow nativamente senza prefissi vendor.
| Valore iniziale | row nowrap |
|---|---|
| Si applica a | Flex container |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.flexFlow = "column nowrap"; |
Sintassi
Sintassi della proprietà CSS flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;Quando impostiamo flex-flow: row wrap;, il primo valore definisce flex-direction e il secondo definisce la proprietà flex-wrap. I due valori sono indipendenti dall'ordine perché accettano parole chiave diverse, quindi flex-flow: wrap row; è ugualmente valido. Si può anche indicare uno solo di essi — ad esempio flex-flow: column; lascia flex-wrap al suo valore predefinito nowrap.
Esempio della proprietà CSS flex-flow
flex-flow: row wrap;Il codice seguente è equivalente al codice precedente.
Esempio delle proprietà flex-direction e flex-wrap
flex-direction: row;
flex-wrap: wrap;Esempio della proprietà flex-flow con i valori "row" e "wrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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>Esempio della proprietà flex-flow con i valori "wrap-reverse" e "column":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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>Esempio della proprietà flex-flow con i valori "row" e "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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
Con flex-flow: row nowrap, tutti e sei gli elementi rimangono su una singola riga orizzontale e si restringono per adattarsi al container invece di andare a capo:
Esempio della proprietà flex-flow con i valori "row-reverse" e "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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>Esempio della proprietà flex-flow con i valori "column" e "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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>Esempio della proprietà flex-flow con i valori "column-reverse" e "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow 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 | Provalo |
|---|---|---|
| flex-direction | Definisce la direzione degli elementi flessibili. I valori possibili sono: row row-reverse column column-reverse initial inherit | Provalo » |
| flex-wrap | Definisce se gli elementi flessibili devono andare a capo o meno. I valori possibili sono: nowrap wrap wrap-reverse initial inherit | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quando usare flex-flow
Utilizza flex-flow ogni volta che devi impostare sia la direzione che il comportamento di wrapping di un flex container. Un pattern comune è una barra di elementi responsive che deve stare in una riga su schermi larghi ma andare a capo su più righe su schermi stretti — flex-flow: row wrap; gestisce questo in una sola dichiarazione. Se devi modificare solo una delle due sotto-proprietà, usare la forma estesa flex-direction o flex-wrap direttamente può rendere l'intento più esplicito. Per un quadro completo di come queste proprietà si integrano, consulta la guida completa a Flexbox.