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

← →
↑
en ru