Разная ширина элементов и сжимаемость флекс блоков в 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;
}