Die flex-grow Eienskap

Die eienskap flex-grow bepaal tot watter mate 'n individuele flex-blok groter kan wees as sy naburige elemente, indien nodig.

Byvoorbeeld, as alle flex-blokke binne 'n flex-houer flex-grow:1 het, sal hulle dieselfde grootte wees. As een van hulle flex-grow:2 het, sal dit 2 keer groter wees as al die ander.

As die totale breedte van die elemente minder is as die breedte van die ouer, bly daar leë spasie regs oor. Indien gewens, kan hierdie leë spasie eweredig tussen ons elemente verdeel word. Dit word gedoen met die flex-grow eienskap, wat aan die flex-elemente toegeken word. Die waarde van hierdie eienskap is 'n dimensielose getal.

Van toepassing op: 'n spesifieke flex-blok.

Hierdie eienskap vorm deel van die verkorte eienskap flex.

Sintaksis

selektor {
	flex-grow: positiewe getal;
}

Standaardwaarde: 0.

Voorbeeld

Tans het ons twee flex-blokke met 'n breedte van 100px. Hul totale breedte is 200px, en die breedte van die ouer is 300px. Dit beteken daar is vry spasie van 100px oor.

As die elemente nie flex-grow het nie, sal ons eenvoudig hierdie vry spasie sien. As dit wel aan hulle toegeken is, sal die werklike breedte van die elemente groter wees as die gespesifiseerde breedte - hulle sal die vry spasie eweredig tussen mekaar verdeel en dit by hul eie breedte voeg.

Laat ons byvoorbeeld sê die eerste element het flex-grow gelyk aan 1, en die tweede een - 3. Kom ons bereken watter deel van die vry spasie elke element sal kry.

Eerstens moet ons die totale aantal eenhede flex-grow van al ons elemente kry. By die eerste element is dit 1, en by die tweede - 3. Dit beteken die som is 4.

Deel nou die 100px vry spasie deur 4 en ons kry dat 25px verteenwoordig een eenheid flex-grow. Dit beteken die eerste element sal een eenheid flex-grow bykry, naamlik 25px, en die tweede een - drie eenhede, naamlik 75px.

Die breedte van die eerste element sal 125px wees, en die tweede een - 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

Laat ons nou aanneem die ouer se breedte is 400px, die eerste element se breedte is 200px, en die tweede element se breedte - 100px. Dit beteken die vry spasie is weer gelyk aan 100px.

Kom ons ken aan elke element flex-grow toe, gelyk aan 1. Die som sal 2 wees, wat beteken die 100px vry spasie moet deur 2 gedeel word. Dit sal wees dat 50px verteenwoordig een eenheid gierigheid.

Aangesien alle elemente dieselfde flex-grow waarde het, sal dieselfde waarde van 50px by al die elemente gevoeg word. Dit beteken die eerste element sal 250px word, en die tweede een sal 150px word:

<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

Laat ons weer aanneem die ouer se breedte is 400px, die eerste element se breedte is 200px, en die tweede element se breedte - 100px.

Kom ons stel nou die eerste element se flex-grow in op waarde 3, en die tweede een - op waarde 1. Die som van die gierigheid sal dan 4 wees. Dan sal een eenheid gierigheid gelyk wees aan 100px / 4 = 25px.

By die eerste element sal 75px bygevoeg word, en dit sal 275px word, en by die tweede een - 25px, dit sal 125px word:

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

Sien ook

die eienskap flex-direction,
wat die rigting van die flex-blokke se asse spesifiseer
die eienskap justify-content,
wat belyning langs die hoof-as spesifiseer
die eienskap align-items,
wat belyning langs die dwars-as spesifiseer
die eienskap flex-wrap,
wat veelreëligheid van flex-blokke spesifiseer
die eienskap flex-flow,
die verkorte vorm vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex-blokke spesifiseer
die eienskap align-self,
wat die belyning van 'n enkele blok spesifiseer
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex-blok spesifiseer
die eienskap flex-shrink,
wat die inkrimpbaarheid van flex-blokke spesifiseer
die eienskap flex,
die verkorte vorm vir flex-grow, flex-shrink en flex-basis