Faktor stlačitelnosti flex bloků v CSS

V předchozí lekci jsme zjistili, že když flex elementům chybí místo, začínají se stlačovat. To, o kolik je celková šířka větší než šířka rodiče, se nazývá negativní volný prostor.

Technicky stlačení znamená, že od šířky každého elementu se ukousne kousek šířky tak, aby se všechny elementy vešly do svého rodiče.

Proveďme nějaký výpočet. Řekněme, že máme 4 elementy o šířce 200px. Zároveň šířka rodiče je 700px. To znamená, že celková šířka elementů je:

200px * 4 = 800px

To je o 100px více než šířka rodiče. Spočítejme, kolik je třeba od každého elementu ukousnout, aby se elementy vešly do svého rodiče:

100px / 4 = 25px

To znamená, že šířka elementů bude:

200px - 25px = 175px

Realizujte popsané bloky a ověřte měřením, že šířka elementů bude skutečně rovna naší kalkulaci.

Spočítejte šířku bloků a poté ověřte výpočty měření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;
}