# Жадность флекс элементов на 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; }`
←→
↑