flex-shrink հատկությունը

flex-shrink հատկությունը որոշում է, թե որքանով կնվազի flex-բլոկը հարևան տարրերի նկատմամբ flex-կոնտեյների ներսում ազատ տարածության պակասի դեպքում:

Օրինակ, եթե flex-կոնտեյների ներսում գտնվող բոլոր flex-բլոկները ունեն flex-shrink:1, ապա դրանք կլինեն նույն չափի: Եթե դրանցից մեկը ունի flex-shrink:2, ապա այն կլինի 2 անգամ ավելի փոքր, քան մնացած բոլորը:

Կիրառվում է՝ կոնկրետ flex-բլոկին:

Այս հատկությունը մտնում է որպես բաղադրիչ մաս flex հապավված հատկության մեջ:

Շարահյուսություն

ընտրիչ {
	flex-shrink: դրական թիվ;
}

Լռելայն արժեքը՝ 1:

Օրինակ

Ենթադրենք ունենք 3 տարր: Նրանցից յուրաքանչյուրի լայնությունը կազմում է 200px և ընդհանուր առմամբ հավասար է 600px, ինչը ավելի մեծ է ծնող կոնտեյների լայնությունից, որն հավասար է 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;
}

Եկեք հաշվարկենք բացասական ազատ տարածությունը բանաձևով.

600px - 350px = 250px

Տարրերի ընդհանուր կշռված լայնությունը հաշվի առնելով flex-shrink հատկության արժեքները յուրաքանչյուր տարրի համար կլինի.

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

Այժմ որոշենք, թե որքան կնվազի առաջին տարրը.

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

Երկրորդ տարրը.

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

Երրորդ տարրը.

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

Ստացվում է, որ երրորդ տարրը, որի flex-shrink արժեքը հավասար է 3, կնվազի ավելի շատ, քան մյուս տարրերը:

Տես նաև

flex-direction հատկությունը,
որը սահմանում է flex-բլոկների առանցքների ուղղությունը
justify-content հատկությունը,
որը սահմանում է հավասարեցումը գլխավոր առանցքի երկայնքով
align-items հատկությունը,
որը սահմանում է հավասարեցումը երկրորդական առանցքի երկայնքով
flex-wrap հատկությունը,
որը flex-բլոկների բազմատողայնությունն է
flex-flow հատկությունը,
հապավում flex-direction-ի և flex-wrap-ի համար
order հատկությունը,
որը սահմանում է flex-բլոկների հերթականությունը
align-self հատկությունը,
որը սահմանում է մեկ բլոկի հավասարեցումը
flex-basis հատկությունը,
որը սահմանում է կոնկրետ flex-բլոկի չափը
flex-grow հատկությունը,
որը սահմանում է flex-բլոկների ագահությունը
flex հատկությունը,
հապավում flex-grow-ի, flex-shrink-ի և flex-basis-ի համար