CSS flex-flow
La proprietà CSS3 flex-flow unisce direzione e ritorno a capo in un contenitore flessibile
La proprietà flex-flow è una scorciatoia che consente di specificare in un’unica riga sia la direzione degli elementi (tramite flex-direction), sia il comportamento di ritorno a capo (tramite flex-wrap). È stata introdotta nel modulo CSS3 Flexbox per semplificare la scrittura del codice.
Sintassi
Significato dei valori principali:
-
flex-direction: determina l’orientamento principale degli elementi. Valori possibili:
row,row-reverse,column,column-reverse. -
flex-wrap: controlla se gli elementi devono andare a capo o restare su una sola riga. Valori:
nowrap,wrap,wrap-reverse. -
Esempio:
flex-flow: row wrap;dispone gli elementi in riga e permette il ritorno a capo.
Esempio proprietà: flex-flow
Codice Esempio: flex-flow
.flex-flow-container {
display: flex;
flex-flow: row wrap;
width: 300px;
background-color: #eee;
gap: 10px;
padding: 10px;
}.flex-flow-item {
background-color: #3a86ff;
color: white;
padding: 20px;
width: 130px;
text-align: center;
font-weight: bold;
border-radius: 4px;
}
Contenuto Esempio: flex-flow
Esempio di utilizzo di flex-flow
In questo esempio, la proprietà flex-flow è impostata su row wrap, quindi gli elementi si dispongono in orizzontale e vanno a capo se non c'è spazio sufficiente:
CSS e HTML per l’esempio con flex-flow: row wrap:
<style>
.flex-flow-container {
display: flex;
flex-flow: row wrap;
width: auto;
background-color: yellow;
gap: 10px;
padding: 10px;
}
.flex-flow-item {
background-color: #3a86ff;
color: white;
padding: 20px;
width: 130px;
text-align: center;
font-weight: bold;
border-radius: 4px;
}
</style>
<div class="flex-flow-container">
<div class="flex-flow-item">1</div>
<div class="flex-flow-item">2</div>
<div class="flex-flow-item">3</div>
<div class="flex-flow-item">4</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
