Egenskapen flex-grow

Egenskapen flex-grow definerer hvor mye en enkelt flex-blokk kan være større enn nabo-elementene, hvis det er nødvendig.

For eksempel, hvis alle flex-blokker inne i en flex-container har flex-grow:1, vil de ha samme størrelse. Hvis en av dem har flex-grow:2, vil den være 2 ganger større enn alle de andre.

Hvis den totale bredden på elementene er mindre enn bredden til forelderen, blir det ledig plass til høyre. Ønsker man det, kan denne ledige plassen fordeles proporsjonalt mellom elementene våre. Dette gjøres ved hjelp av egenskapen flex-grow, som settes på flex-elementene. Verdien til denne egenskapen er et dimensjonsløst tall.

Gjelder for: en spesifikk flex-blokk.

Denne egenskapen inngår som en del av sammenskrevet egenskap flex.

Syntaks

velger {
	flex-grow: positivt tall;
}

Standardverdi: 0.

Eksempel

Nå har vi to flex-blokker med bredde på 100px. Deres totale bredde er 200px, mens bredden til forelderen er 300px. Det betyr at det er ledig plass på 100px.

Hvis elementene ikke har satt flex-grow, vil vi bare se denne ledige plassen. Hvis den derimot er satt, vil den faktiske bredden på elementene være større enn den angitte - de vil proporsjonalt dele den ledige plassen mellom seg og legge den til sin bredde.

La for eksempel det første elementet ha flex-grow satt til 1, og det andre til 3. La oss regne ut hvor mye av den ledige plassen hvert element vil få.

Først må vi få den totale mengden av flex-grow-enheter for alle elementene våre. Det første elementet har 1, og det andre har 3. Det betyr at summen er 4.

La oss nå dele 100px ledig plass på 4 og få at 25px kommer på en flex-grow-enhet. Det vil si at det første elementet vil få én enhet av flex-grow, det vil si 25px, mens det andre vil få tre enheter, det vil si 75px.

Bredden på det første elementet blir 125px, og det andre blir 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

La oss nå si at bredden til forelderen er 400px, bredden til det første elementet er 200px, og bredden til det andre elementet er 100px. Det vil si at den ledige plassen igjen er 100px.

La oss sette flex-grow for hvert element til 1. Summen blir 2, det vil si at 100px ledig plass må deles på 2. Det vil si at 50px kommer på en grådighetsenhet.

Siden alle elementene har samme verdi for flex-grow, vil alle elementene få samme tilleggsverdi på 50px. Det betyr at det første elementet blir 250px, og det andre 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;
}

Eksempel

La oss igjen si at bredden til forelderen er 400px, bredden til det første elementet er 200px, og bredden til det andre elementet er 100px.

La oss nå sette flex-grow for det første elementet til verdien 3, og for det andre til verdien 1. Da blir grådigheten til sammen 4. Da blir én enhet grådighet lik 100px / 4 = 25px.

Det første elementet vil få 75px lagt til, og det blir 275px, mens det andre - får 25px lagt til, og 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 også

egenskapen flex-direction,
som angir retningen på flex-blokkenes akser
egenskapen justify-content,
som angir justering langs hovedaksen
egenskapen align-items,
som angir justering langs kryssaksen
egenskapen flex-wrap,
som angir flerlinjethet for flex-blokker
egenskapen flex-flow,
sammenskrevet for flex-direction og flex-wrap
egenskapen order,
som angir rekkefølgen til flex-blokker
egenskapen align-self,
som angir justering av en enkelt blokk
egenskapen flex-basis,
som angir størrelsen på en spesifikk flex-blokk
egenskapen flex-shrink,
som angir komprimerbarheten til flex-blokker
egenskapen flex,
sammenskrevet for flex-grow, flex-shrink og flex-basis