La proprietà flex-grow degli elementi in CSS

Supponiamo di avere due blocchi flessibili, allineati in una riga. A questi blocchi è assegnata una larghezza di 100px, e al loro genitore - 300px:

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

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Come puoi vedere, la larghezza totale dei nostri elementi è inferiore alla larghezza del genitore, quindi sulla destra rimane spazio vuoto.

Se lo si desidera, questo spazio vuoto può essere diviso proporzionalmente tra i nostri elementi. Questo viene fatto utilizzando la proprietà flex-grow, assegnata agli elementi flessibili. Il valore di questa proprietà è un numero adimensionale.

Vediamo in pratica come funziona questa proprietà.

Esempio

Attualmente abbiamo due blocchi flessibili 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, allora vedremo semplicemente questo spazio libero. Se invece è assegnato, allora 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. Per il primo elemento è 1, e per il secondo - 3. Ciò significa che in totale è 4.

Ora dividiamo 100px di spazio libero per 4 e otteniamo che 25px spettano a una singola unità di flex-grow. Risulta che al primo elemento verrà aggiunta una unità di flex-grow, cioè 25px, e 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. In totale sarà 2, cioè 100px di spazio libero deve essere diviso per 2. Risulterà che 50px spettano a una unità di flex-grow.

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 il flex-grow totale è 4. Allora una unità di flex-grow è uguale a 100px / 4 = 25px.

Al primo elemento verranno aggiunti 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;
}

Compiti pratici

In tutti i compiti qui sotto ti verrà presentato del codice con elementi flessibili, aventi larghezza e flex-grow. In base al codice presentato, calcola quali dimensioni avrà ciascuno degli elementi. Quindi esegui il codice e verifica i tuoi calcoli, misurando le larghezze reali degli elementi.

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

.parent {
	display: flex;
	width: 500px;
	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;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

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

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

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

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

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

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