Свойство flex-grow

Свойство flex-grow определя това, колко отделен flex-блок може да бъде по-голям от съседните елементи, ако е необходимо.

Например, ако всички flex-блокове вътре във flex-контейнер имат flex-grow:1, то те ще бъдат с еднакъв размер. Ако един от тях има flex-grow:2, то той ще бъде 2 пъти по-голям, отколкото всички останали.

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

Прилага се към: конкретен flex блок.

Това свойство влиза като съставна част в свойството-съкращение flex.

Синтаксис

селектор {
	flex-grow: положително число;
}

Стойност по подразбиране: 0.

Пример

В момента имаме два флекс-блока с ширина 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. Tогава една единица алчност е равна на 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-direction,
което задава посока на осите на flex блоковете
свойство justify-content,
което задава подравняване по главната ос
свойство align-items,
което задава подравняване по напречната ос
свойство flex-wrap,
което задава многолинейност на flex блоковете
свойство flex-flow,
съкращение за flex-direction и flex-wrap
свойство order,
което задава ред на flex блоковете
свойство align-self,
което задава подравняване на един блок
свойство flex-basis,
което задава размер на конкретен flex блок
свойство flex-shrink,
което задава свиваемост на flex блоковете
свойство flex,
съкращение за flex-grow, flex-shrink и flex-basis