Свойство 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. Toгда одна единица жадности равна 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