# Разная ширина элементов и сжимаемость флекс блоков в CSS

Пусть теперь наши элементы имеют разную ширину. В этом случае отщепляемый кусочек будет пропорционален ширине этого элемента и будет вычисляться по следующей формуле: отриц. св. пространство * (ширина элемента / сумма всех ширин элементов).

Пусть у нас есть `4` элемента. Пусть ширина первого элемента равна `400px`, ширина остальных элементов - `200px`, а ширина родителя `900px`.

Суммарная ширина элементов равна:

``400px` + `3` * `200px` = `1000px``

Тогда отрицательное свободное пространство будет равно:

``1000px` - `900px` = `100px``

Найдем сколько отщипнется первого элемента:

``100px` * (`400px` / `1000px`) = `40px``

То есть его ширина будет равна:

``400px` - `40px` = `360px``

Найдем сколько от каждого из остальных элементов:

``100px` * (`200px` / `1000px`) = `20px``

То есть ширина этих элементов будет равна:

``200px` - `20px` = `180px``

Реализуйте описанные блоки и проверьте измерением, что ширина элементов будет действительно равна рассчитанной нами.

Рассчитайте ширину блоков, а затем проверьте расчеты измерением:

`<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: 300px; height: 200px; border: 1px solid red; } .child { height: 50px; border: 1px solid green; } .elem1 { width: 300px; } .elem2 { width: 100px; } .elem3 { width: 100px; }`
← →
↑