Flex elements grådighet i CSS

La oss si at vi har to flex-blokker, plassert på rad. Disse blokkene har en bredde på 100px, og deres forelder har - 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Som du ser, er den totale bredden på elementene våre mindre enn bredden på forelderen, så det er ledig plass til høyre.

Om ønskelig 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.

La oss se i praksis hvordan denne egenskapen fungerer.

Eksempel

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

Hvis elementene ikke har flex-grow satt, vil vi bare se denne ledige plassen. Hvis den 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 oss for eksempel si at det første elementet har flex-grow satt til 1, og det andre - 3. La oss regne ut hvilken del av den ledige plassen hvert element vil få.

Først må vi finne 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 dele 100px ledig plass på 4 og vi får at 25px kommer på en flex-grow-enhet. Det betyr at det første elementet vil få én enhet av flex-grow, det vil si 25px, og det andre - tre enheter, det vil si 75px.

Bredden på det første elementet blir 125px, og det andre - 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 si at bredden på forelderen nå er 400px, bredden på det første elementet er 200px, og bredden på det andre elementet er 100px. Da blir den ledige plassen igjen 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. Da blir 50px per grådighetsenhet.

Siden alle elementene har samme verdi for flex-grow, vil alle elementene få den samme økningen 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 si at bredden på forelderen igjen er 400px, bredden på det første elementet er 200px, og bredden på det andre elementet er 100px.

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

Det første elementet vil få 75px, og det blir 275px, og det andre - 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;
}

Praktiske oppgaver

I alle oppgavene nedenfor vil du bli presentert noe kode med flex-elementer som har bredde og flex-grow. Basert på koden som presenteres, beregn hvilke dimensjoner hvert av elementene vil ha. Kjør deretter koden og sjekk beregningene dine ved å måle de faktiske breddene til elementene.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	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;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 1000px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 100px;
	flex-grow: 4;
}
.elem4 {
	width: 100px;
	flex-grow: 3;
}