Flex elements grådighed i CSS

Lad os sige, at vi har to flex-blokke, arrangeret i en række. Disse blokke har en bredde på 100px, og deres forælder - 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 kan se, er den samlede bredde af vores elementer mindre end forælderens bredde, så der er ledig plads til højre.

Hvis ønsket, kan denne ledige plads forholdsmæssigt fordeles 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.

Lad os se i praksis, hvordan denne egenskab fungerer.

Eksempel

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

Hvis elementerne ikke har flex-grow, vil vi simpelthen se denne ledige plads. Hvis de derimod har det, vil den faktiske bredde af elementerne være større end den angivne - de vil forholdsmæssigt fordele den ledige plads mellem sig selv og tilføje den til deres bredde.

Lad os for eksempel sige, at det første element har flex-grow lig med 1, og det andet - 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. For det første element er det 1, og for det andet - 3. Det betyder, at summen er 4.

Lad os nu dividere 100px ledig plads med 4 og få, at 25px falder på en enhed af flex-grow. Det vil sige, at til det første element vil der blive tilføjet en enhed af flex-grow, det vil sige 25px, og til det andet - tre enheder, det vil sige 75px.

Bredden af det første element vil blive 125px, og det andet - 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, bredden af det første element er 200px, og bredden af det andet element - 100px. Det vil sige, at den ledige plads igen er 100px.

Lad os give hvert element flex-grow, lig med 1. I alt bliver det 2, det vil sige, at 100px ledig plads skal deles med 2. Det vil sige, at 50px falder på en enhed af grådighed.

Da alle elementer har den samme værdi af 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, bredden af det første element er 200px, og bredden af det andet element - 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. Det vil sige, at grådigheden i alt er 4. Så er en enhed af grådighed lig med 100px / 4 = 25px.

Til det første element vil der blive tilføjet 75px, 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;
}

Praktiske opgaver

I alle opgaver nedenfor vil du blive præsenteret for noget kode med flex-elementer, der har bredde og flex-grow. Baseret på den præsenterede kode, skal du beregne, hvilke dimensioner hvert af elementerne vil have. Kør derefter koden og kontroller dine beregninger ved at måle de faktiske bredder af elementerne.

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