Sifa flex-shrink

Sifa flex-shrink inabainisha kiwango ambacho flex-block itapungua ukilinganisha na vipengele jirani ndani ya flex-chombo ikiwa kuna upungufu wa nafasi ya bure.

Kwa mfano, ikiwa flex-block zote ndani ya flex-chombo zina flex-shrink:1, basi zitakuwa za ukubwa sawa. Ikiwa moja wapo ina flex-shrink:2, basi itakuwa 2 mara ndogo kuliko zote nyinginezo.

Inatumika kwa: flex block maalum.

Sifa hii inajumuishwa kama sehemu ya sifa iliyofupishwa flex.

Syntax

kichagua {
	flex-shrink: nambari chanya;
}

Thamani chaguomsingi: 1.

Mfano

Tuchukulie tuna vipengele 3. Upana wa kila kimoja ni 200px na kwa jumla ni 600px, ambayo ni zaidi ya upana wa chombo mzazi, ambao ni 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;
}

Wacha tuhesabu nafasi hasi ya bure kwa kutumia fomula:

600px - 350px = 250px

Upana wa jumla wenye uzani wa vipengele kwa kuzingatia thamani za sifa flex-shrink kwa kila kipengele utakuwa:

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

Sasa tuamue kwa kiasi gani kipengele cha kwanza kitapungua:

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

Kipengele cha pili:

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

Kipengele cha tatu:

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

Inatokea kuwa kipengele cha tatu, ambacho thamani yake ya flex-shrink ni 3 kitapungua zaidi kuliko vipengele vingine.

Angalia pia

sifa flex-direction,
ambayo huweka mwelekeo wa shoka za flex block
sifa justify-content,
ambayo huweka mpangilio kwenye mhimili mkuu
sifa align-items,
ambayo huweka mpangilio kwenye mhimili wa pili
sifa flex-wrap,
ambayo huweka wingi wa mistari ya flex block
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo huweka mpangilio wa flex block
sifa align-self,
ambayo huweka mpangilio wa block moja
sifa flex-basis,
ambayo huweka ukubwa wa flex block maalum
sifa flex-grow,
ambayo huweka tamaa ya flex block
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis