Жадност на флекс елементите в CSS

Да предположим, че в момента имаме два флекс блока, подредени в ред. На тези блокове е зададена ширина от 100px, а на техния родител - 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;
}

Както виждате, общата ширина на нашите елементи е по-малка от ширината на родителя, затова отдясно остава празно пространство.

При желание това празно пространство може да бъде пропорционално разделено между нашите елементи. Това се прави чрез свойството flex-grow, задавано на флекс елементите. Стойността на това свойство е безразмерно число.

Нека видим на практика как работи това свойство.

Пример

В момента имаме два флекс блока с ширина от 100px. Общата им ширина 200px, а ширината на родителя - 300px. Получава се, че остава свободно пространство от 100px.

Ако на елементите не е зададен flex-grow, тогава просто ще видим това свободно пространство. Ако е зададен, тогава реалната ширина на елементите ще бъде по-голяма от зададената - те пропорционално ще разделят свободното пространство помежду си и ще го добавят към своята ширина.

Да предположим, че за пример на първия елемент flex-grow е равен на 1, а на втория - 3. Нека изчислим каква част от свободното пространство ще получи всеки елемент.

Първо трябва да получим общия брой единици flex-grow на всички наши елементи. На първия елемент той е 1, а на втория - 3. Това означава, че общо той е 4.

Нека сега разделим 100px свободно пространство на 4 и ще получим, че 25px се пада на една единица flex-grow. Ще се получи, че към първия елемент ще се добави една единица flex-grow, тоест 25px, а към втория - три единици, тоест 75px.

Ширината на първия елемент ще бъде 125px, а на втория - 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;
}

Пример

Да предположим, че ширината на родителя е 400px, ширината на първия елемент 200px, а ширината на втория елемент - 100px. Ще се получи, че свободното пространство отново е 100px.

Нека на всеки елемент зададем flex-grow, равен на 1. Общо ще се получи 2, тоест 100px свободно пространство трябва да се раздели на 2. Ще се получи, че 50px се пада на една единица жадност.

Тъй като всички елементи имат еднаква стойност flex-grow, то към всички елементи ще се добави еднаква стойност от 50px. Това означава, че първият елемент ще стане 250px, и а вторият ще стане 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;
}

Пример

Да предположим, че отново ширината на родителя е 400px, ширината на първия елемент 200px, а ширината на втория елемент - 100px.

Нека сега на първия елемент зададем flex-grow със стойност 3, а на втория - със стойност 1. Ще се получи, че жадността общо е равна на 4. Тогава една единица жадност е равна на 100px / 4 = 25px.

Към първия елемент ще се добави 75px, и той ще стане 275px, а към втория - 25px, той ще стане 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;
}

Практически задачи

Във всички задачи по-долу ще ви бъде представен някакъв код с флекс елементи, имащи ширина и flex-grow. По представения код изчислете какви размери ще има всеки от елементите. След това стартирайте кода и проверете вашите изчисления, като измерите реалните ширини на елементите.

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