Фактор стишљивости флекс блокова у CSS-у

У претходној лекцији смо утврдили да, када флекс елементима недостаје простора, они почињу да се стискују. То, за колико је укупна ширина већа од ширине родитеља назива се негативним слободним простором.

Технички, стискање значи да се од ширине сваког елемента одузима део ширине тако да сви елементи стану у свог родитеља.

Хајде да извршимо неки прорачун. Нека, на пример, имамо 4 елемента ширине 200px. Нека притом ширина родитеља износи 700px. Испада да је укупна ширина елемената:

200px * 4 = 800px

Ова ширина је за 100px већа од ширине родитеља. Хајде да израчунамо, колико од сваког елемента треба да одузмемо, да би елементи стали у свог родитеља:

100px / 4 = 25px

То јест ширина елемената ће бити:

200px - 25px = 175px

Имплементирајте описанe блокове и проверите мерењем, да ли ће ширина елемената заиста бити једнака ономе што смо израчунали.

Израчунајте ширину блокова, а затим проверите прорачуне мерењем:

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