# Нулевая жадность флекс элементов на CSS

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

Давайте для примера произведем какой-нибудь расчет. Пусть у нас есть три флекс-элемента, каждый с шириной в `100px`. Пусть первый элемент не имеет `flex-grow` (или оно равно `0`), второй элемент имеет `flex-grow`, равный `2`, а третий - равный `3`.

Пусть ширина родителя равна `500px`. Тогда свободное пространство будет равно `200px`, а на одну единицу `flex-grow` придется ``200px` / `5` = `40px``. Получится, что ширина первого элемента так и останется `100px`, так как он не участвует в распределении, ширина второго будет ``100px` + `2` * `40px` = `180px``, а ширина третьего - ``100px` + `3` * `40px` = `220px``.

## Практические задачи

Во всех задачах ниже вам будет представлен некоторый код с флекс-элементами, имеющими ширину и `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: 0; } .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: 900px; height: 200px; border: 1px solid red; } .child { height: 50px; border: 1px solid green; } .elem1 { width: 300px; flex-grow: 0; } .elem2 { width: 200px; flex-grow: 3; } .elem3 { width: 100px; flex-grow: 2; }`
`<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: 700px; height: 200px; border: 1px solid red; } .child { height: 50px; border: 1px solid green; } .elem1 { width: 200px; flex-grow: 0; } .elem2 { width: 200px; flex-grow: 0; } .elem3 { width: 100px; flex-grow: 1; } .elem4 { width: 100px; flex-grow: 1; }`
←→
↑