CSS flex-wrap
La proprietà CSS3 flex-wrap gestisce il ritorno a capo degli elementi flessibili
La proprietà flex-wrap consente di decidere se gli elementi all'interno di un contenitore flex devono essere forzati su una sola riga oppure se possono andare a capo su più righe. È parte del modulo CSS3 Flexbox ed è utile per layout flessibili e responsive.
Sintassi
Significato dei valori principali:
-
nowrap: (valore predefinito) tutti gli elementi restano su una sola riga, anche se non c’è spazio a sufficienza (possono ridursi).
-
wrap: gli elementi possono andare a capo su più righe, dall’alto verso il basso (asse verticale standard).
-
wrap-reverse: simile a
wrap, ma le righe sono disposte dal basso verso l’alto (asse verticale invertito).
Esempio proprietà: flex-wrap
Codice Esempio: flex-wrap
.flex-wrap-container {
display: flex;
flex-wrap: wrap;
width: 320px;
background-color: #f3f3f3;
gap: 10px;
padding: 10px;
}.flex-wrap-item {
background-color: #ff6347;
color: white;
padding: 20px;
width: 150px;
text-align: center;
font-weight: bold;
border-radius: 4px;
}
Contenuto Esempio: flex-wrap
Esempio di utilizzo di flex-wrap
In questo esempio, la proprietà flex-wrap è impostata su wrap-reverse, così gli elementi sono disposte dal basso verso l’alto e vanno a capo se non c'è spazio a sufficienza:
CSS e HTML per l’esempio con flex-wrap: wrap:
<style>
.flex-wrap-container {
display: flex;
flex-wrap: wrap-reverse;
width: 320px;
background-color: yellow;
gap: 10px;
padding: 10px;
}
.flex-wrap-item {
background-color: #ff6347;
color: white;
padding: 20px;
width: 150px;
text-align: center;
font-weight: bold;
border-radius: 4px;
}
</style>
<div class="flex-wrap-container">
<div class="flex-wrap-item">Item 1</div>
<div class="flex-wrap-item">Item 2</div>
<div class="flex-wrap-item">Item 3</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
