Egenskaben flex-grow

Egenskaben flex-grow definerer, hvor meget en enkelt flex-blok kan være større end tilstødende elementer, hvis det er nødvendigt.

For eksempel, hvis alle flex-blokke inde i en flex-container har flex-grow:1, vil de have samme størrelse. Hvis en af dem har flex-grow:2, vil den være 2 gange større end alle de andre.

Hvis den samlede bredde af elementerne er mindre end forælderens bredde, forbliver der tom plads til højre. Ønsker man det, kan denne tomme plads fordeles proportionalt mellem vores elementer. Dette gøres ved hjælp af egenskaben flex-grow, som tildeles flex-elementerne. Værdien af denne egenskab er et dimensionsløst tal.

Anvendes på: en specifik flex-blok.

Denne egenskab indgår som en del af shorthand-egenskaben flex.

Syntaks

selektor {
	flex-grow: positivt tal;
}

Standardværdi: 0.

Eksempel

Lige nu har vi to flex-blokke med en bredde på 100px. Deres samlede bredde er 200px, og forælderens bredde er 300px. Det betyder, at der er ledig plads på 100px.

Hvis elementerne ikke har tildelt flex-grow, vil vi simpelthen se denne ledige plads. Hvis de derimod har, vil elementernes faktiske bredde være større end den angivne - de vil proportionalt fordele den ledige plads imellem sig og tilføje den til deres egen bredde.

Lad os for eksemplets skyld sige, at det første elements flex-grow er 1, og det andets er 3. Lad os beregne, hvilken del af den ledige plads hvert element vil modtage.

Først skal vi finde det samlede antal enheder af flex-grow for alle vores elementer. Det første element har 1, og det andet har 3. Det betyder, at summen er 4.

Lad os nu dividere de 100px ledige plads med 4 og få, at 25px falder på en enhed af flex-grow. Det vil sige, at det første element vil tilføjes én enhed af flex-grow, altså 25px, mens det andet vil tilføjes tre enheder, altså 75px.

Det første elements bredde vil blive 125px, og det andets vil blive 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;
}

Eksempel

Lad os nu sige, at forælderens bredde er 400px, det første elements bredde er 200px, og det andet elements bredde er 100px. Det vil sige, at den ledige plads igen er 100px.

Lad os give hvert element en flex-grow på 1. Summen vil blive 2, hvilket betyder, at de 100px ledige plads skal deles med 2. Det vil sige, at 50px falder på én enhed af grådighed.

Da alle elementer har den samme værdi for flex-grow, vil der blive tilføjet den samme værdi på 50px til alle elementer. Det betyder, at det første element vil blive 250px, og det andet vil blive 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;
}

Eksempel

Lad os igen sige, at forælderens bredde er 400px, det første elements bredde er 200px, og det andet elements bredde er 100px.

Lad os nu sætte flex-grow for det første element til værdien 3, og for det andet - til værdien 1. Summen af grådighed vil blive 4. Så vil en enhed af grådighed være 100px / 4 = 25px.

Der vil blive tilføjet 75px til det første element, og det vil blive 275px, og til det andet - 25px, det vil blive 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 også

egenskaben flex-direction,
som angiver retningen for flex-blokkenes akser
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs den tværgående akse
egenskaben flex-wrap,
som angiver fleksibiliteten af flex-blokke
egenskaben flex-flow,
forkortelse for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex-blokke
egenskaben align-self,
som angiver justering af en enkelt blok
egenskaben flex-basis,
som angiver størrelsen på en specifik flex-blok
egenskaben flex-shrink,
som angiver komprimerbarheden af flex-blokke
egenskaben flex,
forkortelse for flex-grow, flex-shrink og flex-basis