Flex elementų suspaudimo reguliavimas CSS

Pagal numatytuosius nustatymus iš visų elementų nupjaunami jų pločiui proporcingi gabaliukai. Tačiau galima pasidaryti taip, kad iš kai kurių elementų būtų nupjaunami didesni ar mažesni gabaliukai. Tam yra skirta speciali savybė flex-shrink.

Ši savybė yra tam tikras svoris, iš kurio bus dauginamas elemento plotis skaičiuojant nupjaunamą gabaliuką pagal jau pateiktą aukščiau formulę. Pavyzdžiui, jei elemento plotis yra 200px, o jo flex-shrink yra 3, tai svertinis (t.y. padaugintas iš svorio) elemento plotis bus lygus:

200px * 3 = 600px

Formulė, atsižvelgiant į flex-shrink, atrodys taip: neigiama laisva erdvė * (svertinis elemento plotis / visų svertinių elementų plotų suma).

Pažiūrėkime pavyzdžiu. Tarkime, kad turime 4 elementus. Tarkime, pirmojo elemento plotis yra 400px, o flex-shrink yra 2, likusių elementų plotis - 200px, o jų flex-shrink yra 1. Tarkime, tėvinio elemento plotis 900px.

Bendras elementų plotis yra:

400px + 3 * 200px = 1000px

Neigiama laisva erdvė bus lygi:

1000px - 900px = 100px

Bendras svertinis elementų plotis yra:

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

Pirmojo elemento svertinis plotis yra:

400px * 2 = 800px

Nuo pirmojo elemento bus nupjaunamas toks gabaliukas:

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

Elemento plotis bus lygus:

400px - 57.14px = 342.86px ~ 343px

Kiekvieno iš likusių elementų svertinis plotis yra:

200px * 1 = 200px

Nuo kiekvieno elemento bus nupjaunamas toks gabaliukas:

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

Elemento plotis bus lygus:

200px - 14.2px = 185.8px ~ 186px

Implementuokite aprašytus blokus ir patikrinkite matavimu, kad elementų plotis tikrai bus lygus mūsų apskaičiuotam.

Apskaičiuokite blokų plotį, o tada patikrinkite skaičiavimus matavimu:

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

Apskaičiuokite blokų plotį, o tada patikrinkite skaičiavimus matavimu:

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

Apskaičiuokite blokų plotį, o tada patikrinkite skaičiavimus matavimu:

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