Lastnost flex-shrink

Lastnost flex-shrink določa, koliko se bo flex-blok zmanjšal relativno glede na sosednje elemente znotraj flex-vsebnika v primeru pomanjkanja prostega prostora.

Na primer, če imajo vsi flex-bloki znotraj flex-vsebnika flex-shrink:1, bodo enake velikosti. Če ima eden od njih flex-shrink:2, bo 2 krat manjši od vseh ostalih.

Velja za: posamezen flex blok.

Ta lastnost je vključena kot sestavni del okrajšane lastnosti flex.

Sintaksa

selektor {
	flex-shrink: pozitivno število;
}

Privzeta vrednost: 1.

Primer

Recimo, da imamo 3 elemente. Širina vsakega od njih je 200px in skupaj znaša 600px, kar je več kot širina nadrejenega vsebnika, ki je 350px:

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

Izračunajmo negativni prosti prostor po formuli:

600px - 350px = 250px

Skupna ponderirana širina elementov ob upoštevanju vrednosti lastnosti flex-shrink za vsak element bo enaka:

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

Zdaj pa določimo, za koliko se bo skrčil prvi element:

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

Drugi element:

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

Tretji element:

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

Izkazalo se je, da se bo tretji element, katerega vrednost flex-shrink je 3, skrčil bolj kot drugi elementi.

Glejte tudi

lastnost flex-direction,
ki določa smer osi flex blokov
lastnost justify-content,
ki določa poravnavo vzdolž glavne osi
lastnost align-items,
ki določa poravnavo vzdolž prečne osi
lastnost flex-wrap,
ki določa večvrstičnost flex blokov
lastnost flex-flow,
okrajšava za flex-direction in flex-wrap
lastnost order,
ki določa vrstni red flex blokov
lastnost align-self,
ki določa poravnavo enega bloka
lastnost flex-basis,
ki določa velikost posameznega flex bloka
lastnost flex-grow,
ki določa "požrešnost" flex blokov
lastnost flex,
okrajšava za flex-grow, flex-shrink in flex-basis