De eigenschap flex-grow

De eigenschap flex-grow bepaalt hoe veel een individueel flex-blok groter kan zijn dan aangrenzende elementen, indien nodig.

Als alle flex-blokken binnen een flex-container bijvoorbeeld flex-grow:1 hebben, dan zullen ze even groot zijn. Als één van hen flex-grow:2 heeft, dan zal hij 2 keer groter zijn dan alle anderen.

Als de totale breedte van de elementen kleiner is dan de breedte van de ouder, blijft er ruimte over aan de rechterkant. Indien gewenst kan deze vrije ruimte proportioneel worden verdeeld tussen onze elementen. Dit wordt gedaan met de eigenschap flex-grow, die wordt toegewezen aan de flex-elementen. De waarde van deze eigenschap is een dimensieloos getal.

Van toepassing op: een specifiek flex-blok.

Deze eigenschap maakt deel uit van de verkorte eigenschap flex.

Syntaxis

selector {
	flex-grow: positief getal;
}

Standaardwaarde: 0.

Voorbeeld

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

Als de elementen geen flex-grow hebben, dan zien we eenvoudigweg deze vrije ruimte. Als het wel is ingesteld, dan zal de werkelijke breedte van de elementen groter zijn dan ingesteld - ze verdelen de vrije ruimte proportioneel onder elkaar en voegen deze toe 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 verkregen. 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 het eerste element één eenheid flex-grow krijgt, dat wil zeggen 25px, en het tweede - drie eenheden, dat wil zeggen 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 geven, gelijk aan 1. De som wordt 2, wat betekent dat de 100px vrije ruimte door 2 gedeeld moet worden. Dit betekent dat 50px per eenheid hebzucht komt.

Omdat 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 dat de breedte van de ouder weer 400px is, de breedte van het eerste element 200px, en de breedte van het tweede element - 100px.

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

Het eerste element krijgt 75px erbij, en wordt 275px, en 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;
}

Zie ook

de eigenschap flex-direction,
die de richting van de assen van flex-blokken bepaalt
de eigenschap justify-content,
die de uitlijning langs de hoofdas bepaalt
de eigenschap align-items,
die de uitlijning langs de cross-as bepaalt
de eigenschap flex-wrap,
die het afbreken van flex-blokken over meerdere regels bepaalt
de eigenschap flex-flow,
een verkorting voor flex-direction en flex-wrap
de eigenschap order,
die de volgorde van flex-blokken bepaalt
de eigenschap align-self,
die de uitlijning van één blok bepaalt
de eigenschap flex-basis,
die de grootte van een specifiek flex-blok bepaalt
de eigenschap flex-shrink,
die de krimpbaarheid van flex-blokken bepaalt
de eigenschap flex,
een verkorting voor flex-grow, flex-shrink en flex-basis