Egenskapen flex-grow

Egenskapen flex-grow bestämmer hur myndet ett enskilt flex-block kan vara större än angränsande element, om det behövs.

Till exempel, om alla flex-block inuti en flex-container har flex-grow:1, så kommer de att ha samma storlek. Om en av dem har flex-grow:2, så kommer den att vara 2 gånger större än alla andra.

Om den totala bredden på elementen är mindre än förälderns bredd, så finns det tomt utrymme kvar till höger. Om så önskas kan detta tomma utrymme fördelas proportionellt mellan våra element. Detta görs med egenskapen flex-grow, som sätts på flex-elementen. Värdet på denna egenskap är ett dimensionslöst tal.

Tillämpas på: ett specifikt flex-block.

Denna egenskap ingår som en del av genvägsegenskapen flex.

Syntax

selektor {
	flex-grow: positivt tal;
}

Standardvärde: 0.

Exempel

Just nu har vi två flex-block med en bredd på 100px. Deras totala bredd är 200px, och förälderns bredd är 300px. Det betyder att det finns ledigt utrymme på 100px kvar.

Om elementen inte har något flex-grow satt, så ser vi bara detta lediga utrymme. Om de däremot har det satt, så kommer den faktiska bredden på elementen att vara större än den angivna - de kommer proportionellt fördela det lediga utrymmet mellan sig och lägga till det till sin bredd.

Låt som exempel det första elementet ha flex-grow satt till 1, och det andra till 3. Låt oss beräkna vilken del av det lediga utrymmet varje element kommer att få.

Först behöver vi få den totala mängden enheter av flex-grow för alla våra element. För det första elementet är det 1, och för det andra är det 3. Det betyder att summan är 4.

Låt oss nu dividera 100px ledigt utrymme med 4 och få att 25px kommer på en enhet av flex-grow. Det blir så, att till det första elementet läggs en enhet av flex-grow, det vill säga 25px, och till det andra - tre enheter, det vill säga 75px.

Bredden på det första elementet blir 125px, och det andra - 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;
}

Exempel

Låt nu förälderns bredd vara 400px, det första elementets bredd 200px, och bredden på det andra elementet - 100px. Det blir, att det lediga utrymmet igen är 100px.

Låt oss sätta flex-grow för varje element, till 1. Summan blir 2, det vill säga 100px ledigt utrymme måste delas med 2. Det blir att 50px kommer på en enhet av girighet.

Eftersom alla element har samma värde på flex-grow, så kommer alla element att få samma värde på 50px. Det betyder, att det första elementet blir 250px, och det andra blir 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;
}

Exempel

Låt återigen förälderns bredd vara 400px, det första elementets bredd 200px, och bredden på det andra elementet - 100px.

Låt oss nu sätta flex-grow för det första elementet till värdet 3, och för det andra - till värdet 1. Det blir att girigheten totalt är 4. Då är en enhet av girighet lika med 100px / 4 = 25px.

Till det första elementet läggs 75px till, och det blir 275px, och till det andra - 25px, det blir 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;
}

Se även

egenskapen flex-direction,
som sätter axlarnas riktning för flex-block
egenskapen justify-content,
som sätter justering längs huvudaxeln
egenskapen align-items,
som sätter justering längs tväraxeln
egenskapen flex-wrap,
som sätter flerradighet för flex-block
egenskapen flex-flow,
genväg för flex-direction och flex-wrap
egenskapen order,
som sätter ordningen för flex-block
egenskapen align-self,
som sätter justering för ett block
egenskapen flex-basis,
som sätter storleken på ett specifikt flex-block
egenskapen flex-shrink,
som sätter ihopdragbarheten för flex-block
egenskapen flex,
genväg för flex-grow, flex-shrink och flex-basis