Proprietà flex-grow

La proprietà flex-grow determina quanto un singolo blocco flex può essere più grande degli elementi adiacenti, se necessario.

Ad esempio, se tutti i blocchi flex all'interno di un contenitore flex hanno flex-grow:1, allora avranno la stessa dimensione. Se uno di essi ha flex-grow:2, sarà 2 volte più grande di tutti gli altri.

Se la larghezza totale degli elementi è minore della larghezza del genitore, rimane spazio vuoto a destra. Se lo si desidera, questo spazio vuoto può essere diviso proporzionalmente tra i nostri elementi. Questo viene fatto utilizzando la proprietà flex-grow, impostata sugli elementi flex. Il valore di questa proprietà è un numero adimensionale.

Si applica a: un singolo blocco flex.

Questa proprietà è inclusa come parte della proprietà shorthand flex.

Sintassi

selettore {
	flex-grow: numero positivo;
}

Valore predefinito: 0.

Esempio

Attualmente abbiamo due blocchi flex con una larghezza di 100px. La loro larghezza totale è 200px, mentre la larghezza del genitore è 300px. Risulta che rimane uno spazio libero di 100px.

Se agli elementi non è assegnato flex-grow, vedremo semplicemente questo spazio libero. Se invece è assegnato, la larghezza reale degli elementi sarà maggiore di quella impostata - essi divideranno proporzionalmente lo spazio libero tra loro e lo aggiungeranno alla propria larghezza.

Ad esempio, supponiamo che il primo elemento abbia flex-grow uguale a 1, e il secondo - 3. Calcoliamo quale parte dello spazio libero otterrà ogni elemento.

Per prima cosa è necessario ottenere la quantità totale di unità flex-grow di tutti i nostri elementi. Il primo elemento ha valore 1, mentre il secondo - 3. Ciò significa che la somma è 4.

Ora dividiamo 100px di spazio libero per 4 e otteniamo che 25px spetta a una unità di flex-grow. Risulta che al primo elemento verrà aggiunta una unità di flex-grow, cioè 25px, mentre al secondo - tre unità, cioè 75px.

La larghezza del primo elemento risulterà 125px, e del secondo - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Esempio

Supponiamo ora che la larghezza del genitore sia 400px, la larghezza del primo elemento 200px, e la larghezza del secondo elemento - 100px. Risulta che lo spazio libero è ancora 100px.

Assegniamo a ogni elemento flex-grow, uguale a 1. La somma sarà 2, cioè 100px di spazio libero deve essere diviso per 2. Risulterà che 50px spetta a una unitá di "avidità".

Poiché tutti gli elementi hanno lo stesso valore di flex-grow, a tutti gli elementi verrà aggiunto lo stesso valore di 50px. Ciò significa che il primo elemento diventerà 250px, e il secondo diventerà 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Esempio

Supponiamo ancora che la larghezza del genitore sia 400px, la larghezza del primo elemento 200px, e la larghezza del secondo elemento - 100px.

Ora impostiamo per il primo elemento flex-grow al valore 3, e per il secondo - al valore 1. Risulterà che l'avidità totale è 4. Allora una unità di avidità è uguale a 100px / 4 = 25px.

Al primo elemento verrà aggiunto 75px, e diventerà 275px, mentre al secondo - 25px, diventerà 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Vedi anche

proprietà flex-direction,
che imposta la direzione degli assi dei blocchi 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 dei blocchi flex
proprietà flex-flow,
shorthand per flex-direction e flex-wrap
proprietà order,
che imposta l'ordine dei blocchi flex
proprietà align-self,
che imposta l'allineamento di un singolo blocco
proprietà flex-basis,
che imposta la dimensione di un specifico blocco flex
proprietà flex-shrink,
che imposta la comprimibilità dei blocchi flex
proprietà flex,
shorthand per flex-grow, flex-shrink e flex-basis