Faktor stisljivosti flex blokov v CSS

V prejšnji lekciji smo ugotovili, da se flex elementi začnejo stiskati, ko jim zmanjka prostora. To, koliko je skupna širina večja od širine starša, se imenuje negativni prosti prostor.

Tehnično stiskanje pomeni, da se od širine vsakega elementa odvzame del širine, tako da se vsi elementi prilegajo v svojega starša.

Izvedimo nekaj izračunov. Recimo, da imamo 4 elemente s širino 200px. Naj bo širina starša enaka 700px. To pomeni, da je skupna širina elementov enaka:

200px * 4 = 800px

To je 100px več kot širina starša. Izračunajmo, koliko moramo odvzeti od vsakega elementa, da se elementi prilegajo v starša:

100px / 4 = 25px

To pomeni, da bo širina elementov:

200px - 25px = 175px

Implementirajte opisane bloke in z merjenjem preverite, ali je širina elementov res enaka naši izračunani.

Izračunajte širino blokov in nato preverite izračune z merjenjem:

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