flex-grow va flex-shrink xususiyatlari qanday…

flex-grow elementning konteynerda bo'sh joy mavjud bo'lsa, qanchalik kuchli o'sishi mumkinligini belgilaydi. 0 (standart) qiymati element o'smaydi degan ma'noni anglatadi. Ijobiy qiymatlar, boshqa flex elementlariga nisbatan o'sish koeffitsientini ko'rsatadi.

flex-shrink esa, elementning konteynerda bo'sh joy kam bo'lsa, qanchalik siqilishi mumkinligini belgilaydi. 1 (standart) qiymati, siqilishi mumkinligini anglatadi. 0 qiymati siqilishni taqiqlaydi. Ijobiy qiymatlar, boshqa flex elementlariga nisbatan siqilish koeffitsientini ko'rsatadi.

Misol uchun:

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

.container {
  display: flex;
  width: 400px; /* Konteyner kengligi */
}

.item {
  flex-basis: 100px; /* Har bir elementning asosiy o'lchami */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Bo'sh joydan 1 qism oladi */
  flex-shrink: 0; /* Siqilmaydi */
}

.item-2 {
  flex-grow: 2; /* Bo'sh joydan 2 qism oladi */
  flex-shrink: 1; /* Siqilishi mumkin */
}

.item-3 {
  flex-grow: 1; /* Bo'sh joydan 1 qism oladi */
  flex-shrink: 1; /* Siqilishi mumkin */
}

Bu holatda, elementlarning umumiy asosiy o'lchami 300px (3 * 100px). Bo'sh joy 100px (400px - 300px). Ushbu bo'sh joy, flex-grow qiymatlari bo'yicha taqsimlanadi: 1 + 2 + 1 = 4. Element 1, 1/4 * 100px = 25px qo'shimcha joy oladi. Element 2, 2/4 * 100px = 50px qo'shimcha joy oladi. Element 3, 1/4 * 100px = 25px qo'shimcha joy oladi.

Ularning yakuniy o'lchamlari: Element 1: 100px + 25px = 125px Element 2: 100px + 50px = 150px Element 3: 100px + 25px = 125px

Agar konteyner kengligi yetarli bo'lmasa (masalan, 200px), siqish zarur bo'ladi. Bo'sh joy yetishmasligi holatida, flex-shrink va elementlarning o'lchamlari hisobga olinadi. Yetishmayotgan joy, flex-shrink 0 dan katta bo'lgan elementlar orasida, flex-shrink ning ko'paytmasi va flex-basisdan keyingi hozirgi o'lchamlariga nisbatan taqsimlanadi. Siqilish algoritmi biroz murakkabroq bo'lsa-da, asosiy g'oya shuki, flex-shrink katta yoki hozirgi o'lchami katta bo'lgan elementlar ko'proq siqiladi.

E'tibor bering, flex-basis, flex-grow va flex-shrink ko'pincha flex qisqa yozma xususiyati sifatida birga ishlatiladi. Masalan, flex: 1 1 auto; flex-grow: 1; flex-shrink: 1; flex-basis: auto; ga teng.

Joy taqsimotida ustuvorlik:

flex-basis: Elementning boshlang'ich o'lchamini belgilaydi.
flex-grow: Ijobiy bo'sh joyni taqsimlaydi.
flex-shrink: Salbiy bo'sh joyni taqsimlaydi (siqilish ehtiyoji).

flex-grow va flex-shrink xususiyatlari qanday ishlaydi?