Flexboxdan foydalanadigan elementlarning o'lchamlarini qanday moslashuvchan tarzda o'zgartirish mumkin?

Flexbox ich elementlarning o'lchamini flex-grow, flex-shrink va flex-basis xususiyatlari yordamida moslashuvchan tarzda o'zgartirish mumkin.

• flex-grow: Element qanday darajada kengayishi mumkinligini, konteynerdagi bo'sh joyni egallash uchun belgilaydi. Standart qiymat 0 (kengaymaydi). Yuqori qiymat, boshqa elementlarga nisbatan kengayish koeffitsientini ko'rsatadi.
• flex-shrink: Bo'sh joy yetishmasligi holatida element qanday darajada siqilishi mumkinligini belgilaydi. Standart qiymat 1 (siqiladi). Yuqori qiymat, ko'proq siqilish koeffitsientini anglatadi.
• flex-basis: Bo'sh joy taqsimlanishidan oldin elementning asosiy o'lchamini belgilaydi. Bu qiymat statik (px, %, rem) yoki kalit so'z (auto, content) bo'lishi mumkin.

Ushbu uchta xususiyat ko'pincha flex qisqartma xususiyatida birlashtiriladi: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Misollar:

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

/* Bo'sh joy yetishmasligi holatida element siqilmaydi */
.flex-item {
  flex-shrink: 0;
}

/* Elementning asosiy o'lchami 100px bo'lib, joy bo'lsa kengayadi */
.flex-item {
  flex: 1 1 100px;
}

/* Elementning asosiy o'lchami uning mazmuni bilan belgilangan va siqilishi mumkin */
.flex-item {
  flex: 0 1 auto; /* `flex: initial;` ga teng */
}

/* Element kengaymaydi, siqilmaydi va asosiy o'lchami mazmun bilan belgilangan */
.flex-item {
  flex: 0 0 auto; /* `flex: none;` ga teng */
}

/* Element kengayadi, siqiladi va asosiy o'lchami 0 bo'ladi (bir xil kenglikdagi elementlar yaratishda qulay) */
.flex-item {
  flex: 1 1 0; /* `flex: auto;` ga teng */
}

Ushbu xususiyatlar yordamida flex konteyner ichidagi elementlarning xatti-harakatini ekran yoki mazmun o'zgarishlariga mos ravishda aniq boshqarish mumkin.