Фактар сціскальнасці флекс блокаў у CSS

У папярэднім уроку мы высветлілі, што, калі флекс элементам не хапае месца, яны пачынаюць сціскацца. То, наколькі сумарная шырыня больш за шырыню бацькі называецца адмоўнай свабоднай прасторай.

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

Давайце зробім некаторы разлік. Хай, напрыклад, у нас ёсць 4 элемента шырынёй у 200px. Хай пры гэтым шырыня бацькі роўная 700px. Атрымліваецца, што сумарная шырыня элементаў роўная:

200px * 4 = 800px

Гэта шырыня на 100px больш шырыні бацькі. Давайце вылічым, колькі ад кожнага элемента трэба адшпіліць, каб элементы змясціліся ў свайго бацьку:

100px / 4 = 25px

Гэта значыць шырыня элементаў будзе:

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;
}