Свойство flex-grow

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

Например, если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера. Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные.

Если суммарная ширина элементов меньше ширины родителя, поэтому справа остается пустое пространство. При желании это пустое пространство можно пропорционально разделить между нашими элементами. Это делается с помощью свойства flex-grow, задаваемого флекс-элементам. Значением этого свойства служит безразмерное число.

Применяется к: конкретному flex блоку.

Данное свойство входит как составная часть в свойство-сокращение flex.

Синтаксис

cssселектор {
  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:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.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:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.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:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

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

Результат:

Смотрите также