Flexbox nima va nima uchun kerak

~10 daq · CSS · Layout — Flexbox

Muammodan boshlaylik

Uch vazifa — har bir veb-sahifada uchraydi:

1. Menyu: logo chapda, havolalar o'ngda, hammasi bir qatorda
2. Uchta kartochka yonma-yon, bir xil balandlikda, matni turlicha uzunlikda bo'lsa ham
3. Matnni blokning o'rtasiga — gorizontal va vertikal — joylash

Flexbox gacha bularning har biri hiyla edi: float lar, display: table, line-height bilan o'ynash, manfiy marginlar. "CSS da elementni vertikal markazlash" — yillar davomida dasturchilarning eng mashhur hazili edi.

Flexbox bularning hammasini bir necha qator bilan hal qiladi.

Flexbox — bir o'lchamli layout

Flexbox (Flexible Box Layout) — elementlarni bitta yo'nalishda — qator yoki ustun bo'ylab — joylashtirish va ular orasida bo'sh joyni taqsimlash tizimi.

.menu {
  display: flex;
}

Shu bitta qator bilan .menu ning bevosita bolalari yonma-yon qatorga tiziladi.

<nav class="menu">
  <a href="/">Bosh sahifa</a>
  <a href="/kurslar">Kurslar</a>
  <a href="/donat">Donat</a>
</nav>

display: block (standart)        display: flex

┌───────────────────┐            ┌─────────────────────────────────────┐
│ Bosh sahifa       │            │ Bosh sahifa │ Kurslar │ Donat       │
├───────────────────┤            └─────────────────────────────────────┘
│ Kurslar           │
├───────────────────┤
│ Donat             │
└───────────────────┘

Ikki rol: konteyner va elementlar

[!WARNING] Flex faqat bevosita bolalarga ta'sir qiladi. Nevaralarga — yo'q. Agar ichki element ham flex bo'lishi kerak bo'lsa — unga ham display: flex bering. Flex konteynerlarni ichma-ich qo'yish — odatiy holat.

Ikki o'q

Flexbox ning asosiy tushunchasi — ikki o'q:

                    cross axis (ko'ndalang o'q)
                           ↓
        ┌──────────────────────────────────────┐
        │  ┌──────┐  ┌──────┐  ┌──────┐        │
main →  │  │  1   │  │  2   │  │  3   │        │  → main axis (asosiy o'q)
axis    │  └──────┘  └──────┘  └──────┘        │
        └──────────────────────────────────────┘

• Main axis (asosiy o'q) — elementlar tiziladigan yo'nalish. Standartda — chapdan o'ngga
• Cross axis (ko'ndalang o'q) — unga perpendikulyar. Standartda — tepadan pastga

Barcha flex xususiyatlari shu ikki o'qqa nisbatan ishlaydi:

• justify-content — asosiy o'q bo'yicha tekislash
• align-items — ko'ndalang o'q bo'yicha tekislash

flex-direction: column qilsangiz — o'qlar almashadi: asosiy o'q vertikal bo'ladi (14-dars). Shuning uchun "justify — gorizontal, align — vertikal" deb yodlash xato; to'g'risi: "justify — asosiy o'q, align — ko'ndalang o'q".

Uch muammo — uch yechim

1. Menyu: logo chapda, havolalar o'ngda

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

┌──────────────────────────────────────────────────┐
│ LOGO                       Kurslar  Blog  Kirish │
└──────────────────────────────────────────────────┘

2. Bir xil balandlikdagi kartochkalar

.cards {
  display: flex;
  gap: 24px;
}

Flex elementlar standart holatda ko'ndalang o'q bo'ylab cho'ziladi (align-items: stretch) — eng baland kartochka qancha bo'lsa, qolganlari ham shuncha. Qo'shimcha kod kerak emas.

3. Mukammal markazlash

.hero {
  display: flex;
  justify-content: center;   /* gorizontal */
  align-items: center;       /* vertikal */
  min-height: 100dvh;
}

Yillar davom etgan muammo — uch qator.

Flexbox yoki Grid?

Ular raqobatchi emas — birga ishlatiladi: sahifa tuzilishi — Grid, uning ichidagi komponentlar — Flexbox. Batafsil — 18-dars.

inline-flex

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

inline-flex — konteyner ichi flex, lekin o'zi inline element kabi matn qatorida turadi (inline-block kabi, 7-dars). Ikonka + matn li tugmalar va belgilar uchun qulay.

Nima uchun shunday?

Nima uchun Flexbox paydo bo'lgunga qadar oddiy narsalar shunchalik qiyin edi?

Chunki CSS dastlab hujjatlar uchun yaratilgan: matn yuqoridan pastga oqadi, rasmlar matn ichida "suzadi" (float). Interfeys — menyular, panellar, tugmalar qatorlari — haqida hech kim o'ylamagan edi. Dasturchilar hujjat uchun mo'ljallangan vositalarni (float — aslida matnni rasm atrofida aylantirish uchun) layout uchun moslashtirishga majbur bo'lishdi — shuning uchun hamma narsa hiyla va mo'rt edi. Flexbox — CSS ning interfeys uchun maxsus yaratilgan birinchi layout tizimi: "bo'sh joyni taqsimla", "tekisla", "markazla" degan tushunchalar uning asosida. 2017 yildan barcha brauzerlarda ishlaydi va bugun deyarli har bir saytning asosi.

Xulosa

Eslab qoling:

• display: flex — bevosita bolalarni qatorga tizadi
• Konteyner (display: flex) va elementlar (bevosita bolalar)
• Ikki o'q: asosiy (tizilish yo'nalishi) va ko'ndalang
• justify-content — asosiy o'q bo'yicha; align-items — ko'ndalang o'q bo'yicha
• Standartda elementlar ko'ndalang o'q bo'ylab cho'ziladi — bir xil balandlik
• Markazlash: justify-content: center + align-items: center
• Flexbox — bir o'lchamli; Grid — ikki o'lchamli; ular birga ishlatiladi
• inline-flex — matn qatoridagi flex konteyner

Keyingi dars

14-dars: Flex Container — flex-direction, flex-wrap, gap