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