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 блоктар осьтерінің бағытын белгілейтін flex-direction қасиеті
негізгі ось бойынша туралауды белгілейтін justify-content қасиеті
көлденең ось бойынша туралауды белгілейтін align-items қасиеті
flex блоктардың көпжолдылығын белгілейтін flex-wrap қасиеті
flex-direction және flex-wrap үшін қысқарту болып табылатын flex-flow қасиеті
flex блоктардың ретін белгілейтін order қасиеті
бір блоктың туралауын белгілейтін align-self қасиеті
нақты flex блогының өлшемін белгілейтін flex-basis қасиеті
flex блоктардың "ашкөздігін" белгілейтін flex-grow қасиеті
flex-grow, flex-shrink және flex-basis үшін қысқарту болып табылатын flex қасиеті