Lăcomia elementelor flex în CSS

Să presupunem că avem două blocuri flex, aranjate pe un rând. Acestor blocuri li se atribuie o lățime de 100px, iar părintelui lor - 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;
}

După cum vedeți, lățimea totală a elementelor noastre este mai mică decât lățimea părintelui, deci în dreapta rămâne spațiu liber.

Dacă se dorește, acest spațiu liber poate fi împărțit proporțional între elementele noastre. Acest lucru se face cu proprietatea flex-grow, atribuită elementelor flex. Valoarea acestei proprietăți este un număr adimensional.

Să vedem în practică cum funcționează această proprietate.

Exemplul

Acum avem două blocuri flex cu lățimea de 100px. Lățimea totală a elementelor 200px, iar lățimea părintelui - 300px. Rezultă că rămâne spațiu liber de 100px.

Dacă elementelor nu le este atribuit flex-grow, atunci vom vedea pur și simplu acest spațiu liber. Dacă li se atribuie, atunci lățimea reală a elementelor va fi mai mare decât cea setată - ele vor împărți proporțional spațiul liber între ele și îl vor adăuga la lățimea lor.

Să presupunem, de exemplu, că primul element are flex-grow egal cu 1, iar al doilea - 3. Să calculăm, ce parte din spațiul liber va primi fiecare element.

Pentru început, trebuie să obținem numărul total de unități flex-grow ale tuturor elementelor noastre. La primul element este egal cu 1, iar la al doilea - 3. Aceasta înseamnă că în total este egal cu 4.

Să împărțim acum 100px de spațiu liber la 4 și obținem că 25px revin unei unități de flex-grow. Rezultă, că la primul element se va adăuga o unitate flex-grow, adică 25px, iar la al doilea - trei unități, adică 75px.

Lățimea primului element va fi 125px, iar a celui de-al doilea - 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;
}

Exemplul

Să presupunem acum că lățimea părintelui este 400px, lățimea primului element 200px, iar lățimea celui de-al doilea element - 100px. Rezultă, că spațiul liber este din nou egal cu 100px.

Să atribuim fiecărui element flex-grow, egal cu 1. În total va fi 2, adică 100px de spațiu liber trebuie împărțit la 2. Rezultă că 50px revin unei unități de lăcomie.

Deoarece toate elementele au aceeași valoare flex-grow, atunci la toate elementele se va adăuga aceeași valoare de 50px. Aceasta înseamnă, că primul element va deveni 250px, iar al doilea va deveni 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;
}

Exemplul

Să presupunem din nou că lățimea părintelui este 400px, lățimea primului element 200px, iar lățimea celui de-al doilea element - 100px.

Să stabilim acum primului element flex-grow la valoarea 3, iar celui de-al doilea - la valoarea 1. Rezultă că lăcomia în total este egală cu 4. Atunci o unitate de lăcomie este egală cu 100px / 4 = 25px.

La primul element se va adăuga 75px, și va deveni 275px, iar la al doilea - 25px, acesta va deveni 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;
}

Probleme practice

În toate problemele de mai jos vi se va prezenta un cod cu elemente flex, care au lățime și flex-grow. Pe baza codului prezentat calculați, ce dimensiuni va avea fiecare dintre elemente. Apoi rulați codul și verificați-vă calculele, măsurând lățimile reale ale elementelor.

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