flex-grow va flex-shrink xususiyatlari qanday…

flex-grow va flex-shrink flex elementlar ichki bo'sh joyni qanday taqsimlashini boshqaradi.

flex-grow:

Flex konteyner ichida mavjud bo'sh joyning qaysi qismi element tomonidan egallanishini belgilaydi, agar bo'sh joy bo'lsa.
Standart qiymati flex-grow: 0, bu element o'smaydi degani.
Qiymat - nolga teng bo'lmagan raqam.
Agar bir nechta elementlarning flex-grow qiymati 0 dan katta bo'lsa, bo'sh joy ular orasida flex-grow qiymatlari bo'yicha nisbatan taqsimlanadi.

flex-shrink:

Agar flex konteyner ichidagi mavjud bo'sh joy, barcha flex elementlarning asosiy o'lchamlari yig'indisidan kichik bo'lsa, element qancha siqilishini belgilaydi.
Standart qiymati flex-shrink: 1, bu element siqilishi mumkinligini anglatadi.
Qiymat - nolga teng bo'lmagan raqam.
flex-shrink qiymati katta bo'lsa, element boshqa elementlarga nisbatan ko'proq siqiladi.
Siqilish vaqtida, elementning asosiy kengligi (flex-basis yoki width) hisobga olinadi.

Misol:

.konteyner {
  display: flex;
  width: 500px;
  /* Umumiy kenglik konteyner uchun */
}

.element {
  flex-basis: 100px;
  /* Har bir elementning asosiy kengligi */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Standart qiymatlar */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Siqilmaydi */
}

.element:nth-child(3) {
  flex-grow: 0; /* O'smaydi */
  flex-shrink: 2; /* Ko'proq siqiladi */
}

Agar asosiy kengliklarning yig'indisi (300px) konteyner kengligidan (500px) kichik bo'lsa, qolgan joy (200px) birinchi va ikkinchi elementlar orasida flex-grow 1:2 nisbatida taqsimlanadi.

Agar asosiy kengliklarning yig'indisi konteyner kengligidan katta bo'lsa, elementlar flex-shrink qiymatlari va asosiy o'lchamlarga muvofiq siqiladi. flex-shrink: 0 bo'lgan element siqilmaydi.

flex-grow va flex-shrink xususiyatlari qanday ishlaydi?