Faktor sabijanja flex blokova u CSS

U prethodnoj lekciji smo utvrdili da, kada flex elementima nedostaje prostora, oni počinju da se sabijaju. Iznos za koji je ukupna širina veća od širine roditelja naziva se negativnim slobodnim prostorom.

Tehnički, sabijanje znači da se od širine svakog elementa odvaja komadić širine tako da svi elementi stanu u svog roditelja.

Hajde da izvršimo neki proračun. Recimo, na primer, da imamo 4 elementa širine 200px. Neka pri tome širina roditelja bude 700px. Ispada da je ukupna širina elemenata:

200px * 4 = 800px

To je širina za 100px veća od širine roditelja. Hajde da izračunamo, koliko od svakog elementa treba da odvojimo, da bi elementi stali u svog roditelja:

100px / 4 = 25px

To jest, širina elemenata će biti:

200px - 25px = 175px

Implementirajte opisane blokove i proverite merenjem, da li će širina elemenata zaista biti jednaka našoj proračunatoj.

Izračunajte širinu blokova, a zatim proverite proračune merenjem:

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