Flex-grow va flex-shrink xususiyatlari qanday ishlaydi?

flex-grow va flex-shrink elementlarning moslashuvchan tarzda o‘z o‘lchamini o‘zgartirishini belgilaydi, mos ravishda, bo‘sh joy yoki etarli bo‘lmagan joy holatida.

flex-grow - element bo‘sh joy bo‘lsa, uning o‘sishini belgilovchi koeffitsient. Standart qiymat 0 (element kengaymaydi). Agar bir nechta elementlarning flex-grow qiymati 0 dan katta bo‘lsa, bo‘sh joy ular orasida flex-grow qiymatlari bo‘yicha nisbatan taqsimlanadi.

.item {
  flex-grow: 1; /* Element mavjud bo‘sh joyni to‘liq ishlatadi */
}

flex-shrink - element etarli joy bo‘lmaganda, uning siqilishini belgilovchi koeffitsient. Standart qiymat 1 (element boshqa siqilayotgan elementlar bilan nisbatan siqiladi). 0 qiymati elementning siqilishini oldini oladi.

.item {
  flex-shrink: 0; /* Element siqilmaydi */
}

Ular flex-basis bilan birga, flex qisqartma xususiyatini tashkil qiladi: flex: <flex-grow> <flex-shrink> <flex-basis>.

Misol:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.container {
  display: flex;
  width: 400px; /* Fiks kenglikdagi konteyner misoli */
}

.item {
  flex-basis: 100px; /* Barcha elementlarning asosiy o‘lchami */
}

.item-1 {
  flex-grow: 1; /* Item 1 bo‘sh joyni to‘liq ishlatadi */
}

.item-2 {
  flex-shrink: 0; /* Item 2 siqilmaydi */
}

Agar konteyner 200px dan kengroq bo‘lsa (100px + 100px), item-1 qolgan bo‘sh joyni oladi. Agar konteyner allaqachon 200px bo‘lsa, item-2 o‘z asosiy o‘lchamini saqlaydi va item-1 siqiladi.