CSS flex blokkok összenyomásának szabályozása

Alapértelmezés szerint minden elemből arányos darabok vágnak le, az elem szélességével arányosan. Azonban lehetőség van arra, hogy egyes elemekből nagyobb vagy kisebb darabok vágjanak le. Erre szolgál a speciális tulajdonság flex-shrink.

Ez a tulajdonság egy bizonyos súlyt jelent, amellyel megszorozzuk az elem szélességét a fent már említett képlet szerinti levágandó darab kiszámításakor. Például, ha az elem szélessége 200px, és a flex-shrink értéke 3, akkor a súlyozott (azaz a súllyal megszorzott) szélessége az elemnek a következő lesz:

200px * 3 = 600px

A flex-shrink figyelembe vételével a képlet a következő formában lesz: negatív szabad tér * (súlyozott szélessége az elemnek / az összes súlyozott szélesség összege).

Nézzünk egy példát. Tegyük fel, hogy van 4 elemünk. Legyen az első elem szélessége 400px, és a flex-shrink értéke 2, a többi elem szélessége - 200px, és a flex-shrink értékük 1. Legyen a szülő szélessége 900px.

Az elemek összesített szélessége:

400px + 3 * 200px = 1000px

A negatív szabad tér egyenlő lesz:

1000px - 900px = 100px

Az elemek összesített súlyozott szélessége:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Az első elem súlyozott szélessége:

400px * 2 = 800px

Az első elemből a következő darab vágódik le:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Az elem szélessége egyenlő lesz:

400px - 57.14px = 342.86px ~ 343px

A többi elem súlyozott szélessége egyenlő:

200px * 1 = 200px

Minden elemből a következő darab vágódik le:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Az elem szélessége egyenlő lesz:

200px - 14.2px = 185.8px ~ 186px

Valósítsa meg a leírt blokkokat és ellenőrizze méréssel, hogy az elemek szélessége valóban egyenlő lesz a mi általunk 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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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 class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}