De greedy eigenschap van flex elementen in CSS

Stel we hebben nu twee flex-blokken, op een rij geplaatst. Deze blokken hebben een breedte van 100px, en hun ouder - 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;
}

Zoals je ziet, is de totale breedte van onze elementen kleiner dan de breedte van de ouder, dus rechts blijft er vrije ruimte over.

Indien gewenst kan deze vrije ruimte proportioneel verdeeld worden tussen onze elementen. Dit gebeurt met behulp van de eigenschap flex-grow, die aan flex-elementen wordt toegewezen. De waarde van deze eigenschap is een dimensieloos getal.

Laten we in de praktijk bekijken hoe deze eigenschap werkt.

Voorbeeld

Momenteel hebben we twee flex-blokken met een breedte van 100px. Hun totale breedte van de elementen is 200px, en de breedte van de ouder is 300px. Dat betekent dat er vrije ruimte overblijft van 100px.

Als aan de elementen geen flex-grow is toegewezen, dan zien we simpelweg deze vrije ruimte. Als het wel is toegewezen, dan zal de werkelijke breedte van de elementen groter zijn dan de opgegeven - ze zullen proportioneel de vrije ruimte onderling verdelen en het toevoegen aan hun eigen breedte.

Stel bijvoorbeeld dat het eerste element een flex-grow heeft van 1, en het tweede - 3. Laten we berekenen welk deel van de vrije ruimte elk element krijgt.

Eerst moet het totale aantal eenheden flex-grow van al onze elementen worden berekend. Het eerste element heeft 1, en het tweede - 3. Dit betekent dat de som 4 is.

Laten we nu de 100px vrije ruimte delen door 4 en we krijgen dat 25px per eenheid flex-grow komt. Dit betekent dat aan het eerste element één eenheid flex-grow wordt toegevoegd, dat is 25px, en aan het tweede - drie eenheden, dat is 75px.

De breedte van het eerste element wordt 125px, en van het tweede - 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;
}

Voorbeeld

Stel dat de breedte van de ouder nu 400px is, de breedte van het eerste element 200px, en de breedte van het tweede element - 100px. Dit betekent dat de vrije ruimte weer 100px is.

Laten we elk element een flex-grow toewijzen, gelijk aan 1. In totaal wordt dat 2, wat betekent dat de 100px vrije ruimte moet worden gedeeld door 2. Dit betekent dat 50px per eenheid greedy komt.

Aangezien alle elementen dezelfde waarde flex-grow hebben, wordt aan alle elementen dezelfde waarde van 50px toegevoegd. Dit betekent dat het eerste element 250px wordt, en het tweede wordt 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;
}

Voorbeeld

Stel opnieuw dat de breedte van de ouder 400px is, de breedte van het eerste element 200px, en de breedte van het tweede element - 100px.

Laten we nu het eerste element instellen met flex-grow op waarde 3, en het tweede - op waarde 1. Dit betekent dat de greedy in totaal 4 is. Dan is één eenheid greedy gelijk aan 100px / 4 = 25px.

Aan het eerste element wordt 75px toegevoegd, en het wordt 275px, en aan het tweede - 25px, het wordt 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;
}

Praktische opdrachten

In alle onderstaande opdrachten wordt aan u een stuk code getoond met flex-elementen die een breedte en flex-grow hebben. Bereken op basis 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: 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;
}