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

cssselector {
  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:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.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:

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

Endi birinchi element qanchalik qisqarishini aniqlaymiz:

Ikkinchi element:

Uchinchi element:

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

Shuningdek qarang