Nul-gulzigheid van flex elementen in CSS

Als flex-grow gelijk is aan nul voor een bepaald element, dan zal dat element niet deelnemen aan de verdeling van de vrije ruimte. Standaard is de gulzigheid inderdaad nul en daarom delen elementen zonder een ingestelde flex-grow de vrije ruimte niet onderling.

Laten we voor de duidelijkheid een berekening maken. Stel we hebben drie flex-elementen, elk met een breedte van 100px. Stel het eerste element heeft geen flex-grow (of het is gelijk aan 0), het tweede element heeft een flex-grow, gelijk aan 2, en de derde - gelijk aan 3.

Stel de breedte van de ouder is 500px. Dan is de vrije ruimte gelijk aan 200px, en per eenheid flex-grow komt er 200px / 5 = 40px vrij. Het resultaat is dat de breedte van het eerste element 100px blijft, omdat het niet deelneemt aan de verdeling, de breedte van de tweede wordt 100px + 2 * 40px = 180px, en de breedte van de derde - 100px + 3 * 40px = 220px.

Praktische opdrachten

In alle onderstaande opdrachten wordt aan u een stuk code getoond met flex-elementen die een breedte en flex-grow hebben. Bereken aan de hand van de getoonde code welke afmetingen elk van de elementen zal hebben. Voer vervolgens de code uit en controleer uw berekeningen door de werkelijke breedtes van de elementen te meten.

<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;
}