1.3-bob: Flexbox (chuqur)

1-QISM — HTML, CSS va zamonaviy stillar · 3-mavzu

1. Kirish va motivatsiya

Oldingi bobda 1.2-bob bitta elementning "qutisi"ni (box model) boshqardik. Lekin real sahifa — ko'p qutidan iborat: menyu havolalari yonma-yon, kartalar bir qatorda, tugma markazda. Ularni bir-biriga nisbatan qanday joylashtirish — bu layout muammosi. Tarixda bu eng og'riqli mavzu edi (float, inline-block hiyalalari bilan azob). Flexbox shu azobni tugatdi.

Flexbox (Flexible Box Layout) — elementlarni bir o'lcham bo'ylab (qator yoki ustun) qulay joylashtirish, tekislash va taqsimlash tizimi. "Markazga qo'yish" — Flexbox'da bir qator kod.

O'xshatish: stol ustiga likopchalarni terishni tasavvur qiling. Flexbox — bu "aqlli stol": siz "likopchalarni bir qatorga ter, teng oraliq qoldir, markazga yig'" desangiz — u o'zi joylaydi. Siz har birining aniq koordinatasini hisoblab o'tirmaysiz.

Nega Flexbox majburiy?

• Har bir zamonaviy sayt uni ishlatadi: navbar, kartalar, formalar, tugmalar guruhi.
• Responsive 1.5-bob ning asosi — Flexbox elementlarni ekranga moslab egiluvchan qiladi.
• React/Next (11, 13) komponentlarining ichki layout'i deyarli doim Flexbox yoki Grid.
• "Vertikal markazlash" — o'n yil dasturchilarni qiynagan muammo — Flexbox bilan 2 qator.

2. Nazariya — chuqur tushuntirish

2.1. Asosiy g'oya: konteyner va elementlar

Flexbox ikki darajali tizim:

• Flex konteyner (container) — ota element; unga display: flex beriladi.
• Flex elementlar (items) — uning bevosita bolalari; ular avtomatik "flex item"ga aylanadi.

   .konteyner (display: flex)
   ┌───────────────────────────────────────┐
   │  ┌──────┐  ┌──────┐  ┌──────┐          │
   │  │ item │  │ item │  │ item │          │
   │  └──────┘  └──────┘  └──────┘          │
   └───────────────────────────────────────┘

Muhim: faqat bevosita bolalar flex item bo'ladi (nabiralar emas).

2.2. Ikki o'q (axis) — Flexbox'ning yuragi

Flexbox'ni tushunishning kaliti — ikki o'qni farqlash:

   flex-direction: row (sukut — gorizontal)

        main axis (asosiy o'q) ────────────▶
   ┌──────────────────────────────────────┐
 c │  ┌──────┐  ┌──────┐  ┌──────┐         │
 r │  │      │  │      │  │      │         │
 o │  └──────┘  └──────┘  └──────┘         │
 s │                                        │
 s └──────────────────────────────────────┘
   │
   ▼  cross axis (ko'ndalang o'q)

• Main axis (asosiy o'q) — elementlar shu yo'nalishda tiziladi.
• Cross axis (ko'ndalang o'q) — asosiyga perpendikulyar.

flex-direction asosiy o'q yo'nalishini belgilaydi:

Eng muhim qoida: flex-directionni o'zgartirsangiz, justify-content va align-items ham o'q bilan birga aylanadi. rowda justify-content gorizontal; columnda esa vertikal bo'lib qoladi. Aynan shu yerda ko'pchilik adashadi.

2.3. Konteyner xususiyatlari (asosiy o'q bo'yicha — justify-content)

justify-content — elementlarni main axis bo'ylab taqsimlaydi. Sukut: flex-start.

  justify-content: flex-start   [■■■            ]  boshga
  justify-content: flex-end     [            ■■■]  oxirga
  justify-content: center       [      ■■■      ]  markazga
  justify-content: space-between[■    ■    ■]      chetlar + teng oraliq
  justify-content: space-around [ ■   ■   ■ ]      har element atrofida teng
  justify-content: space-evenly [  ■  ■  ■  ]      hamma oraliq teng

2.4. Konteyner xususiyatlari (ko'ndalang o'q bo'yicha — align-items)

align-items — elementlarni cross axis bo'ylab tekislaydi. Sukut: stretch.

  align-items: stretch     elementlar balandlikni TO'LDIRadi (sukut)
  align-items: flex-start  yuqoriga
  align-items: flex-end    pastga
  align-items: center      ko'ndalang markazga
  align-items: baseline    matn chizig'i bo'yicha

"Markazga qo'yish" sehri — har ikki o'qda markaz:

css

.markaz { display: flex; justify-content: center; align-items: center; }

Mana shu 3 qator — o'n yil qiynagan muammoning yechimi.

2.5. O'rash (flex-wrap) va gap

Sukut bo'yicha flex elementlar bitta qatorga sig'diriladi (kerak bo'lsa qisiladi). flex-wrap: wrap — sig'masa, keyingi qatorga o'tkazadi:

.konteyner {
  display: flex;
  flex-wrap: wrap;   /* sig'masa, yangi qatorga tushadi */
  gap: 1rem;         /* elementlar orasidagi masofa (1.2: margin collapse'siz!) */
}

gap — elementlar orasidagi masofa. Bu margindan ustun: collapse muammosi yo'q 1.2-bob, faqat oraliqlarga qo'llanadi (chetga emas).

gapni ikki o'q uchun alohida ham boshqarish mumkin:

• row-gap — qatorlar orasidagi masofa (wrap bo'lganda yangi qatorgacha bo'lgan oraliq).
• column-gap — ustunlar (yonma-yon elementlar) orasidagi masofa.
• gap — ikkalasining qisqartmasi: gap: <row-gap> <column-gap> (bitta qiymat berilsa, ikkalasiga ham).

.konteyner {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;       /* qatorlar orasi kattaroq */
  column-gap: 1rem;    /* elementlar orasi kichikroq */
  /* qisqasi: gap: 2rem 1rem; */
}

flex-flow — flex-direction + flex-wrap qisqartmasi: flex-flow: row wrap;.

align-content — flex-wrap: wrap bo'lib, bir nechta qator hosil bo'lganda, qatorlarning o'zini cross axis bo'ylab taqsimlaydi. Sukut: stretch.

Muhim farq: align-items har bitta qator ichidagi elementlarni tekislaydi; align-content esa qatorlar guruhini (faqat ko'p qatorli flexda) taqsimlaydi. Bitta qator bo'lsa, align-content hech narsa qilmaydi.

  align-content qiymatlari (faqat flex-wrap: wrap + ko'p qator bo'lsa):

  stretch        qatorlar balandlikni TO'LDIRib cho'ziladi (sukut)
  flex-start     qatorlar yuqoriga yig'iladi
  flex-end       qatorlar pastga yig'iladi
  center         qatorlar ko'ndalang markazga
  space-between  qatorlar: chetlar + orada teng oraliq
  space-around   har qator atrofida teng oraliq
  space-evenly   barcha oraliq teng

.konteyner {
  display: flex;
  flex-wrap: wrap;
  align-content: center;   /* qator(lar) bloki ko'ndalang o'q markazida */
  min-height: 400px;       /* taqsimlash uchun ortiqcha balandlik kerak */
}

2.6. Element xususiyatlari — flex-grow, flex-shrink, flex-basis

Bular har bir elementga (konteynerga emas) beriladi va elementning o'lchamini boshqaradi:

• flex-grow (sukut 0) — bo'sh joy bo'lsa, element qanchalik kengayadi. 0 = kengaymaydi.
• flex-shrink (sukut 1) — joy yetmasa, qanchalik qisiladi. 1 = qisila oladi.
• flex-basis (sukut auto) — elementning boshlang'ich o'lchami (kontentga yoki widthga qarab).

flex — uchalasining qisqartmasi (eng ko'p ishlatiladi):

.item { flex: 0 1 auto; }   /* sukut: grow=0, shrink=1, basis=auto */
.item { flex: 1; }          /* = 1 1 0 — barchasi TENG bo'lib kengaydi */
.item { flex: 2; }          /* boshqalardan 2 BAROBAR ko'p joy oladi */

  flex: 1  bo'lganda — barcha elementlar bo'sh joyni TENG bo'lib oladi:
  ┌────────────────────────────────────────┐
  │ [   1   ] [   1   ] [   1   ]            │  teng
  │ [  1  ] [    2    ] [  1  ]              │  o'rtadagisi 2x
  └────────────────────────────────────────┘

2.7. align-self — bitta elementni alohida tekislash

align-self — align-itemsni bitta element uchun bekor qiladi (cross axis):

.konteyner { display: flex; align-items: flex-start; }
.maxsus { align-self: center; }  /* faqat shu element markazda */

2.8. order — tartibni o'zgartirish

order (sukut 0) — HTML tartibini o'zgartirmasdan, ko'rinish tartibini o'zgartiradi (kichikroq oldinga):

.birinchi-ko'rinsin { order: -1; }  /* hammadan oldinga */

(Diqqat: bu faqat ko'rinish — DOM tartibi o'zgarmaydi, shuning uchun accessibility'ga ehtiyot bo'ling.)

3. Sintaksis — tez ma'lumotnoma

/* KONTEYNER xususiyatlari */
.konteyner {
  display: flex;              /* flex'ni yoqadi */
  flex-direction: row;       /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;           /* nowrap | wrap | wrap-reverse 2.5-bob */
  flex-flow: row wrap;       /* direction + wrap qisqartmasi 2.5-bob */
  justify-content: center;   /* main axis taqsimoti 2.3-bob */
  align-items: center;       /* cross axis tekislash — bir qator 2.4-bob */
  align-content: center;     /* cross axis — ko'p qator 2.5-bob */
  gap: 1rem;                 /* oraliq masofa 2.5-bob */
  row-gap: 1rem;             /* faqat qatorlar orasi 2.5-bob */
  column-gap: 1rem;          /* faqat ustunlar orasi 2.5-bob */
}

/* ELEMENT xususiyatlari */
.item {
  flex-grow: 0;              /* bo'sh joyda kengayish ulushi 2.6-bob */
  flex-shrink: 1;            /* joy yetmasa qisilish ulushi 2.6-bob */
  flex-basis: auto;          /* boshlang'ich o'lcham 2.6-bob */
  flex: 1;                   /* grow shrink basis qisqartma 2.6-bob */
  align-self: flex-end;      /* alohida tekislash 2.7-bob */
  order: 2;                  /* ko'rinish tartibi 2.8-bob */
}

4. Batafsil kod namunalari

Misol 1 — Navbar (logo chapda, menyu o'ngda)

.navbar {
  display: flex;                    /* gorizontal (sukut: row) */
  justify-content: space-between;   /* logo chetda, menyu nari chetda 2.3-bob */
  align-items: center;             /* vertikal markaz — balandlikda tekis 2.4-bob */
  padding: 1rem 2rem;
}
.navbar nav {
  display: flex;
  gap: 1.5rem;                     /* havolalar orasi 2.5-bob */
}

<header class="navbar">
  <div class="logo">MySite</div>
  <nav>
    <a href="#">Bosh</a>
    <a href="#">Xizmatlar</a>
    <a href="#">Aloqa</a>
  </nav>
</header>

Misol 2 — Mukammal markazlash (har ikki o'qda)

.hero {
  display: flex;
  justify-content: center;   /* gorizontal markaz */
  align-items: center;       /* vertikal markaz */
  min-height: 100vh;         /* butun ekran balandligi (1.2: vh) */
}
/* Ichidagi kontent aniq markazda — Flexbox'ning eng mashhur ishlatilishi */

Misol 3 — Teng kartalar (responsive)

.kartalar {
  display: flex;
  flex-wrap: wrap;           /* sig'masa pastga tushadi 2.5-bob */
  gap: 1rem;
}
.karta {
  flex: 1 1 250px;           /* grow=1, shrink=1, basis=250px */
  /* har karta kamida ~250px, bo'sh joyni teng bo'lib kengayadi 2.6-bob */
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Misol 4 — "Sticky footer" (footer doim pastda)

body {
  display: flex;
  flex-direction: column;    /* vertikal: header, main, footer 2.2-bob */
  min-height: 100vh;
}
main {
  flex: 1;                   /* main bo'sh joyni TO'LDIRadi  footer pastga itariladi */
}
/* Natija: kontent kam bo'lsa ham, footer doim ekran pastida turadi */

5. To'g'ri va noto'g'ri holatlar

1) Markazlash uchun eski hiyalar

/*  ESKI — margin/position bilan azob */
.box { margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }

/*  FLEXBOX — sodda va ishonchli 2.4-bob */
.parent { display: flex; justify-content: center; align-items: center; }

2) Element orasi uchun margin

/*  chetda ham ortiqcha margin qoladi */
.item { margin-right: 1rem; }

/*  gap — faqat oraliqqa 2.5-bob */
.konteyner { display: flex; gap: 1rem; }

3) flex-direction: columnda o'qlarni adashtirish

/* column'da justify-content VERTIKAL, align-items GORIZONTAL bo'ladi! 2.2-bob */
.col {
  display: flex;
  flex-direction: column;
  justify-content: center;  /*  bu endi VERTIKAL markaz */
  align-items: center;      /*  bu endi GORIZONTAL markaz */
}

Nega: o'qlar flex-direction bilan aylanadi. Buni bilmaslik — eng ko'p uchraydigan Flexbox xatosi.

4) Nabiraga flex kutish

/*  faqat BEVOSITA bolalar flex item 2.1-bob */
/*  ichki guruhga ham alohida display: flex bering */

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — justify-content ishlamayapti

Sababi: elementlar allaqachon butun joyni egallagan (bo'sh joy yo'q) yoki flex-direction adashgan 2.2-bob. Yechimi: DevTools'da 0.5-bob konteynerni tanlab, Flexbox overlay bilan o'qlarni ko'ring; bo'sh joy bor-yo'qligini tekshiring.

Xato 2 — Elementlar qisilib ketyapti

Sababi: flex-shrink: 1 (sukut) — joy yetmasa qisadi 2.6-bob. Yechimi: qisilmasin desangiz flex-shrink: 0; yoki flex-wrap: wrap bilan pastga tushiring.

Xato 3 — align-items: center balandlikni buzyapti

Sababi: stretch (sukut) o'rniga center — elementlar endi cho'zilmaydi 2.4-bob. Yechimi: ataylab shundaymi tekshiring; balandlik kerak bo'lsa stretch qoldiring.

Xato 4 — gap eski brauzerda ishlamayapti

Sababi: juda eski brauzer flex gapni qo'llamaydi. Yechimi: zamonaviyda ishlaydi; juda eski kerak bo'lsa margin bilan zaxira (kamdan-kam).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Grid 1.4-bob: Flexbox — bir o'lcham (qator yoki ustun); Grid — ikki o'lcham. Ikkalasi birga ishlatiladi.
• Responsive 1.5-bob: flex-wrap + flex-basis + media queries — moslashuvchan layout.
• CSS asoslari 1.2-bob: box model + gap (margin collapse'siz).
• Tailwind 1.7-bob: flex, justify-center, items-center — aynan shu xususiyatlarning utility'si.
• React komponentlar (11): komponent ichki layout'i deyarli Flexbox.
• Animatsiya 11.16-bob: flex elementlar transform bilan 0.5-bob.

8. Eng yaxshi amaliyotlar (best practices)

• "Bir qator / bir ustun" bo'lsa — Flexbox; "to'r (grid)" bo'lsa — Grid 1.4-bob.
• Markazlash = display:flex; justify-content:center; align-items:center — yodlang.
• Element orasiga gap ishlating, margin emas 2.5-bob.
• flex: 1 — teng ustunlar uchun eng oson yo'l 2.6-bob.
• flex-directionni o'zgartirganingizda o'qlar aylanishini eslang 2.2-bob.
• DevTools Flexbox inspektorini ishlating — o'qlar va bo'sh joyni ko'rsatadi.
• Sticky footer uchun body { display:flex; flex-direction:column; min-height:100vh } main { flex:1 } (Misol 4).

9. Amaliy loyiha: "Responsive Navbar va Karta Galereyasi"

Flexbox'ni amalda mustahkamlash: real komponentlar yasaysiz.

Maqsad

Flexbox bilan professional navbar va moslashuvchan karta galereyasini qurib, o'qlar, taqsimot va egiluvchanlikni his qilish.

Talablar (requirements)

1. Navbar: logo (chapda) va menyu (o'ngda) — justify-content: space-between, align-items: center (Misol 1). Menyu havolalari orasida gap.
2. Hero bo'lim: butun ekran balandligi (min-height: 100vh), ichidagi sarlavha+tugma har ikki o'qda markazda (Misol 2).
3. Karta galereyasi: kamida 6 ta karta, flex-wrap: wrap + flex: 1 1 250px — ekran kichraysa, kartalar pastga tushsin (Misol 3).
4. Sticky footer: kontent kam bo'lsa ham footer pastda tursin (Misol 4).
5. Bitta kartani ajrating: align-self yoki order bilan bitta kartani boshqalardan farqli joylashtiring (2.7–2.8).
6. (Bonus) Kartaga :hoverda transform: translateY(-5px) + transition (0.5, 1.2).

Maslahatlar (hint)

• DevTools konteynerda "flex" belgisini bosing o'qlar overlay'ini ko'ring.
• Hero markazlash uchun konteynerga min-height: 100vh shart (aks holda markazlash uchun balandlik yo'q).
• Karta flex: 1 1 250px — basis 250px, lekin bo'sh joyda kengayadi/qisiladi.
• Sticky footer: bodyni flex column qiling, mainga flex: 1.
• Brauzer oynasini kichraytirib, flex-wrap ishlashini kuzating.

"Tayyor" mezonlari (acceptance criteria)

• Navbar: logo chapda, menyu o'ngda, vertikal tekis.
• Hero: kontent aniq markazda (gorizontal + vertikal).
• Kartalar oyna kichrayganda pastga tushadi (wrap ishlaydi).
• Footer kontent kam bo'lganda ham ekran pastida.
• Kamida bitta karta align-self/order bilan ajratilgan.
• Element orasida gap ishlatilgan (margin emas).
• (Bonus) Hover animatsiya silliq.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda zamonaviy layout'ning yarmini — Flexboxni o'rgandik:

• Flexbox — bir o'lcham bo'ylab joylashtirish; konteyner (display:flex) + elementlar (bevosita bolalar).
• Ikki o'q: main axis (flex-direction) va cross axis. justify-content — main bo'ylab; align-items — cross bo'ylab. O'qlar flex-direction bilan aylanadi.
• Markazlash = justify-content:center + align-items:center.
• flex-wrap + gap — o'rash va oraliq; flex: 1 — teng kengayish; align-self/order — alohida boshqaruv.

Keyingi bob — 1.4-bob: CSS Grid (chuqur), positions, container, width. Flexbox bir o'lchamni (qator yoki ustun) boshqaradi. Grid esa ikki o'lchamni (qator va ustun bir vaqtda) — ya'ni haqiqiy "to'r" layout. Murakkab sahifa tuzilmalarini (dashboard, galereya) Grid bilan oson quramiz.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — Basic concepts of flexbox, aligning items
• MDN Web Docs — justify-content, align-items, flex, flex-grow/shrink/basis (default qiymatlar)
• CSS-Tricks — A Complete Guide to Flexbox