Flexbox qanday ishlaydi?

Savol

Flexbox modeli qanday ishlaydi va uni qachon ishlatish kerak?

Qisqa javob

Flexbox — bir o'lchamli joylashtirish modeli: elementlar bitta qator yoki ustunda joylashadi va mavjud bo'sh joyni moslashuvchan tarzda taqsimlaydi.

Batafsil javob

Konteyner xususiyatlari (display: flex):

• flex-direction — row / column — elementlar joylashuvining o'qi.
• justify-content — asosiy o'q bo'yicha tekislash (flex-start, center, space-between...).
• align-items — ko'ndalang o'q bo'yicha tekislash.
• flex-wrap — elementlarning yangi qatorga ko'chishi.
• gap — "ortiqcha" margin ishlatmasdan elementlar orasidagi otstuplar.

Element xususiyatlari:

• flex-grow — element boshqalarga nisbatan qanchalik cho'ziladi.
• flex-shrink — joy yetishmaganda element qanchalik siqiladi.
• flex-basis — bo'sh joy taqsimlanishidan oldingi bazaviy o'lcham.
• flex: 1 1 0 — "mavjud joyni barchasini teng taqsimlab egallash"ning ko'p ishlatiladigan qisqartmasi.

Flexbox bir o'lchamli raskladkalar uchun ideal: navigatsiya panellari, qatordagi kartochkalar, blokni markazlashtirish uchun. Ikki o'lchamli setkalar (bir vaqtda qatorlar + ustunlar) uchun Grid ko'proq mos keladi.

Misol

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.grow {
  flex: 1; /* qolgan bo'sh joyning barchasini egallaydi */
}

Qo'shimcha savollar

• justify-content align-itemsdan nimasi bilan farq qiladi?
• flex: 1 1 auto flex: 1 1 0ga solishtirganda nima qiladi?
• Flexbox o'rniga qachon Grid tanlash kerak?