Фактор сжимаемости флекс блоков в CSS

В предыдущем уроке мы выяснили, что, когда флекс элементам не хватает места, они начинают сжиматься. To, насколько суммарная ширина больше ширины родителя называется отрицательным свободным пространством.

Технически сжатие означает, что от ширины каждого элемента отщипывается кусочек ширины так, чтобы все элементы поместились в своего родителя.

Давайте произведем некоторый расчет. Пусть, к примеру, у нас есть 4 элемента шириной в 200px. Пусть при этом ширина родителя равна 700px. Получается, что суммарная ширина элементов равна:

200px * 4 = 800px

Это ширина на 100px больше ширины родителя. Давайте вычислим, сколько от каждого элемента надо отщипнуть, чтобы элементы поместились в своего родителя:

100px / 4 = 25px

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

200px - 25px = 175px

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

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

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