Omadus flex-shrink

Omadus flex-shrink määrab selle, kui palju flex-blokk väheneb suhteliselt naaberelementidega flex-konteineris juhul, kui vaba ruumi ei piisa.

Näiteks kui kõik flex-blokid flex-konteineris on väärtusega flex-shrink:1, siis nad on ühesuurused. Kui ühel neist on väärtus flex-shrink:2, siis on see 2 korda väiksem kui kõik teised.

Kehtib: konkreetsele flex-blokile.

See omadus on osa lühendomadusest flex.

Süntaks

valija {
	flex-shrink: positiivne arv;
}

Vaikeväärtus: 1.

Näide

Oletame, et meil on 3 elementi. Igaühe laius on 200px ja kokku on nad 600px, mis on suurem kui vanemakonteinieri laius, mis on 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

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

Arvutame negatiivse vaba ruumi valemi järgi:

600px - 350px = 250px

Elementide kaalutud laius kokku arvestades iga elemendi omaduse flex-shrink väärtusi, on:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Nüüd määrame, kui palju esimene element kahaneb:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Teine element:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Kolmas element:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Selgub, et kolmas element, mille väärtus flex-shrink on 3, kahaneb rohkem kui teised elemendid.

Vaata ka

omadus flex-direction,
mis määrab flex-blokkide telgede suuna
omadus justify-content,
mis määrab joonduse põhitelje suunas
omadus align-items,
mis määrab joonduse risttelje suunas
omadus flex-wrap,
mis määrab flex-blokkide mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-blokkide järjestuse
omadus align-self,
mis määrab ühe bloki joonduse
omadus flex-basis,
mis määrab konkreetse flex-bloki suuruse
omadus flex-grow,
mis määrab flex-blokkide "ahneuse"
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks