A flex blokkok összenyomhatósági tényezője CSS-ben

Az előző leckében kiderítettük, hogy amikor a flex elemeknek nincs elég hely, elkezdenek összenyomódni. Azt, hogy a teljes szélesség mennyivel nagyobb a szülő szélességénél, negatív szabad térnek nevezzük.

Technikailag az összenyomódás azt jelenti, hogy minden elem szélességéből lecsípünk egy kis részt úgy, hogy az összes elem beleférjen a szülőjébe.

Végezzünk el néhány számítást. Tegyük fel például, hogy 4 elemünk van, egyenként 200px szélességgel. Tegyük fel továbbá, hogy a szülő szélessége 700px. Így az elemek összesített szélessége:

200px * 4 = 800px

Ez 100px-rel nagyobb, mint a szülő szélessége. Számítsuk ki, mennyit kell lecsípni minden elemből, hogy azok beleférjenek a szülőjébe:

100px / 4 = 25px

Vagyis az elemek szélessége a következő lesz:

200px - 25px = 175px

Valósítsa meg a leírt blokkokat, és méréssel ellenőrizze, hogy az elemek szélessége valóban egyenlő-e a számított értékkel.

Számítsa ki a blokkok szélességét, majd ellenőrizze a számításokat méréssel:

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