Proprietà flex
La proprietà flex è un'abbreviazione per flex-basis,
flex-shrink
e flex-grow.
Si applica a: un singolo elemento flex.
L'ordine dei valori non ha importanza. Il secondo e il terzo
parametro (flex-shrink, flex-basis)
sono opzionali.
Valori
Vedi le rispettive proprietà.
Valore predefinito: 0 1 auto.
Esempio
Supponiamo di avere 3 elementi. La larghezza di ciascuno di essi
è 200px e complessivamente è 600px,
che è maggiore della larghezza del contenitore genitore, che
è 300px. Assegniamo al primo elemento una larghezza di
200px, al secondo elemento - 300px, al
terzo elemento - 100px. Per tutti gli elementi
impostiamo il valore flex-basis a 1,
e flex-shrink - a 1, 2, 3 in base
al numero d'ordine dell'elemento:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Vedi anche
-
proprietà
flex-direction,
che imposta la direzione degli assi degli elementi flex -
proprietà
justify-content,
che imposta l'allineamento lungo l'asse principale -
proprietà
align-items,
che imposta l'allineamento lungo l'asse trasversale -
proprietà
flex-wrap,
che imposta la multilinea degli elementi flex -
proprietà
flex-flow,
abbreviazione per flex-direction e flex-wrap -
proprietà
order,
che imposta l'ordine degli elementi flex -
proprietà
align-self,
che imposta l'allineamento di un singolo elemento -
proprietà
flex-basis,
che imposta la dimensione di un singolo elemento flex -
proprietà
flex-grow,
che imposta l'"ingordigia" degli elementi flex -
proprietà
flex-shrink,
che imposta la comprimibilità degli elementi flex
