Фактор на свиваемост на флекс блоковете в 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;
}