Flex-shrink xususiyati

flex-shrink xususiyati, agar bo'sh joy yetarli bo'lmasa, flex-konteyner ichidagi qo'shni elementlarga nisbatan flex-blok qanchalik kichrayishini belgilaydi.

Masalan, agar flex-konteyner ichidagi barcha flex-bloklar flex-shrink:1 ga ega bo'lsa, ular bir xil o'lchamda bo'ladi. Agar ulardan biri flex-shrink:2 ga ega bo'lsa, u boshqalarga qaraganda 2 marta kichikroq bo'ladi.

Qo'llaniladi: aniq bir flex blokka.

Ushbu xususiyat flex qisqartma xususiyatining tarkibiy qismi sifatida kiradi.

Sintaksis

selector {
	flex-shrink: musbat son;
}

Standart qiymat: 1.

Misol

Faraz qilaylik, bizda 3 ta element bor. Ularning har birining kengligi 200px va ularning yig'indisi 600px ga teng, bu esa ota-konteynerning kengligidan katta, uning kengligi 350px ga teng:

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

Keling, salbiy bo'sh joyni quyidagi formula bo'yicha hisoblaylik:

600px - 350px = 250px

Har bir element uchun flex-shrink xususiyati qiymatlari hisobga olingan holda, elementlarning og'irlashtirilgan kengliklari yig'indisi quyidagicha bo'ladi:

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

Endi birinchi element qanchalik qisqarishini aniqlaymiz:

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

Ikkinchi element:

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

Uchinchi element:

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

Ma'lum bo'lishicha, flex-shrink qiymati 3 ga teng bo'lgan uchinchi element boshqa elementlarga qaraganda ko'proq qisqaradi.

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklarning o'qlari yo'nalishini belgilaydi
justify-content xususiyati,
bu asosiy o'q bo'yicha tekislashni belgilaydi
align-items xususiyati,
bu ko'ndalang o'q bo'yicha tekislashni belgilaydi
flex-wrap xususiyati,
bu flex bloklarning ko'p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
order xususiyati,
bu flex bloklarning tartibini belgilaydi
align-self xususiyati,
bu bitta blokning tekislanishini belgilaydi
flex-basis xususiyati,
bu aniq bir flex blokning o'lchamini belgilaydi
flex-grow xususiyati,
bu flex bloklarning "ochko'zligini" belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma