Lăcomia zero a elementelor flex în CSS

Dacă flex-grow este zero pentru un element, atunci acel element nu va participa la distribuirea spațiului liber. În mod implicit, lăcomia are tocmai valoarea zero și, prin urmare, elementele fără flex-grow setat nu împart spațiul liber între ele.

Să facem un calcul ca exemplu. Să presupunem că avem trei elemente flex, fiecare cu lățimea de 100px. Să presupunem că primul element nu are flex-grow setat (sau este egal cu 0), al doilea element are flex-grow egal cu 2, iar al treilea - egal cu 3.

Să presupunem că lățimea părintelui este 500px. Atunci spațiul liber va fi egal cu 200px, iar pe o unitate de flex-grow va reveni 200px / 5 = 40px. Rezultă că lățimea primului element va rămâne 100px, deoarece acesta nu participă la distribuire, lățimea celui de-al doilea va fi 100px + 2 * 40px = 180px, iar lățimea celui de-al treilea - 100px + 3 * 40px = 220px.

Sarcini practice

În toate sarcinile de mai jos, vi se va prezenta un cod cu elemente flex care au lățime și flex-grow setate. Pe baza codului prezentat, calculați ce dimensiuni va avea fiecare element. Apoi rulați codul și verificați calculele dvs., 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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}