Flex-blokkide kokkusurumise reguleerimine CSS-is

Vaikimisi võetakse kõikidest elementidest ära tükid, mis on võrdelised elemendi laiusega. Siiski on võimalik teha nii, et mõnest elemendist võetakse ära suuremad või väiksemad tükid. Selleks on olemas spetsiaalne omadus flex-shrink.

See omadus on teatud kaal, millega korrutatakse elemendi laiust ära võetava tüki arvutamisel vastavalt ülaltoodud valemile. Näiteks kui elemendi laius on 200px ja selle flex-shrink on 3, siis kaalutud (st kaaluga korrutatud) elemendi laius saab olema:

200px * 3 = 600px

Valem, mis arvestab flex-shrink-i, on järgmine: neg. vaba ruum * (kaalutud elemendi laius / kõikide kaalutud laiuste summa).

Vaatame näidet. Olgu meil 4 elementi. Olgu esimese elemendi laius 400px ja flex-shrink võrdne 2, ülejäänud elementide laius - 200px ja nende flex-shrink on võrdne 1. Olgu vanema laius 900px.

Elementide kogulaius on:

400px + 3 * 200px = 1000px

Negatiivne vaba ruum on:

1000px - 900px = 100px

Elementide kogukaalutud laius on:

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

Esimese elemendi kaalutud laius on:

400px * 2 = 800px

Esimeselt elemendilt võetakse ära järgmine tükk:

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

Elemendi laius on:

400px - 57.14px = 342.86px ~ 343px

Ülejäänud elementide igaühe kaalutud laius on:

200px * 1 = 200px

Iga elemendilt võetakse ära järgmine tükk:

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

Elemendi laius on:

200px - 14.2px = 185.8px ~ 186px

Realiseerige kirjeldatud plokid ja kontrollige mõõtmisega, et elementide laius on tõepoolest võrdne meie poolt arvutatuga.

Arvutage plokkide laius ja seejärel kontrollige arvutusi mõõtmisega:

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

Arvutage plokkide laius ja seejärel kontrollige arvutusi mõõtmisega:

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

Arvutage plokkide laius ja seejärel kontrollige arvutusi mõõtmisega:

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