Flex elements girighet i CSS

Låt oss säga att vi nu har två flex-block, radade i rad. Dessa block har en bredd på 100px, och deras förä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 ser är den totala bredden av våra element mindre än förälderns bredd, så det finns ledigt utrymme kvar till höger.

Om så önskas kan detta lediga utrymme fördelas proportionellt mellan våra element. Detta görs med egenskapen flex-grow, som tilldelas flex-elementen. Värdet på denna egenskap är en dimensionslös siffra.

Låt oss i praktiken se hur denna egenskap fungerar.

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 kvar på 100px.

Om elementen inte har flex-grow satt, så ser vi bara detta lediga utrymme. Om det är satt, så kommer elementens faktiska bredd att bli 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 - 3. Låt oss beräkna hur mycket 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 - 3. Det betyder att summan är 4.

Låt oss nu dividera 100px ledigt utrymme med 4 och få att 25px motsvarar en enhet av flex-grow. Det betyder att det första elementet kommer att få en enhet av flex-grow, det vill säga 25px, och 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 oss nu säga att förälderns bredd är 400px, det första elementets bredd 200px, och det andra elementets bredd - 100px. Det betyder att det lediga utrymmet återigen ä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 betyder att 50px motsvarar en enhet av girighet.

Eftersom alla element har samma värde på flex-grow, så kommer alla element att få samma värde, nämligen 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 oss återigen säga att förälderns bredd är 400px, det första elementets bredd 200px, och det andra elementets bredd - 100px.

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

Det första elementet kommer att få 75px, och det blir 275px, och 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;
}

Praktiska uppgifter

I alla uppgifter nedan kommer du att presenteras med viss kod med flex-element som har bredd och flex-grow. Baserat på den presenterade koden, beräkna vilka dimensioner varje element kommer att ha. Kör sedan koden och kontrollera dina beräkningar genom att mäta de faktiska bredderna på elementen.

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