Faktor stlačiteľnosti flex blokov v CSS

V predchádzajúcej lekcii sme zistili, že keď flex elementom chýba miesto, začnú sa stláčať. To, o koľko je súhrnná šírka väčšia ako šírka rodiča, sa nazýva negatívny voľný priestor.

Technicky stlačenie znamená, že od šírky každého elementu sa odreže kúsok šírky tak, aby sa všetky elementy zmestili do svojho rodiča.

Urobme nejaký výpočet. Nech napríklad máme 4 elementy so šírkou 200px. Nech pri tom šírka rodiča je 700px. To znamená, že súhrnná šírka elementov je:

200px * 4 = 800px

To je o 100px viac ako šírka rodiča. Vypočítajme, koľko od každého elementu treba odrezať, aby sa elementy zmestili do svojho rodiča:

100px / 4 = 25px

To znamená, že šírka elementov bude:

200px - 25px = 175px

Realizujte opísané bloky a overte meraním, že šírka elementov bude naozaj rovná tej, ktorú sme vypočítali.

Vypočítajte šírku blokov a potom overte výpočty meraním:

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