Greed zero degli elementi flex in CSS

Se flex-grow è zero per un elemento, allora quell'elemento non parteciperà alla distribuzione dello spazio libero. Per impostazione predefinita, la greed (avidità) ha proprio valore zero e quindi gli elementi senza flex-grow impostato non si dividono lo spazio libero tra di loro.

Facciamo un esempio con un calcolo. Supponiamo di avere tre elementi flex, ciascuno con una larghezza di 100px. Supponiamo che il primo elemento non abbia flex-grow (o che sia uguale a 0), il secondo elemento abbia flex-grow, uguale a 2, e il terzo - uguale a 3.

Supponiamo che la larghezza del genitore sia 500px. Allora lo spazio libero sarà uguale a 200px, e per una unità di flex-grow avremo 200px / 5 = 40px. Risulterà che la larghezza del primo elemento rimarrà 100px, poiché non partecipa alla distribuzione, la larghezza del secondo sarà 100px + 2 * 40px = 180px, e la larghezza del terzo - 100px + 3 * 40px = 220px.

Compiti pratici

In tutti i compiti qui sotto ti verrà presentato del codice con elementi flex che hanno 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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}