Chapter 9 — Flexbox Chuqur O'rganish

---

9.1 Flexbox Mental Modeli

Simple Explanation

Flexbox ikkita o'q asosida ishlaydi: main axis va cross axis. flex-rowda main axis gorizontal, flex-colda vertikal.

Example

index.html
HTMLNusxalash
01<div class="flex justify-between items-center p-4 bg-white shadow">
02  <span class="font-bold text-xl">Logo</span>
03  <div class="flex gap-6"><a href="#">Bosh sahifa</a></div>
04</div>

9.2 justify-* va items-*

Mental Model

🧠 justify-* — MAIN axis bo'yicha, items-* — CROSS axis bo'yicha hizalash.

9.3 flex-1 va Pricing Card

Example

index.html
HTMLNusxalash
01<div class="flex flex-col p-6 border rounded-xl w-64">
02  <h3 class="text-xl font-bold">Pro Plan</h3>
03  <ul class="flex-1 space-y-2 text-gray-600"><li>10 loyiha</li></ul>
04  <button class="bg-blue-500 text-white py-2 rounded-lg mt-4">Tanlash</button>
05</div>

⚠️ Common Mistake
flex-1ni barcha elementlarga qo'yish — natijada barchasi teng kenglikda bo'ladi, faqat kerakli elementga berish kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: flex justify-between items-center bilan oddiy header yarating (logo + 1 ta link).

🟡 Exercise 2 — Medium

Task: Yuqoridagi Pricing Card'ni to'liq qayta yasang, flex-1 yordamida tugmani pastga "yopishtiring".

🔴 Exercise 3 — Hard

Task: Sidebar + Content layout yarating: flex konteyner, sidebar w-64 flex-none, content flex-1.

---

🔮 Predict the Output

index.html
HTMLNusxalash
01<div class="flex flex-col justify-center h-64">
02  <div>A</div>
03  <div>B</div>
04</div>

🧠 Think first! A va B qayerda joylashadi?

<details> <summary>Answer</summary> A va B vertikal markazda joylashadi (chunki `flex-col`da `justify-center` vertikal ishlaydi), lekin gorizontal bo'yicha o'zgarish yo'q (chunki `items-*` berilmagan, default stretch). </details>

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="flex">
02  <div class="flex-1">A</div>
03  <div class="flex-1">B</div>
04  <div class="flex-1">C</div>
05</div>

Your Task: Agar shu uch qutidan faqat birortasi kattaroq bo'lishi kerak bo'lsa (masalan B ikki barobar keng), qanday tuzatasiz?

<details> <summary>Solution</summary> `B` elementiga `flex-[2]` yoki `flex-2` (agar config'da mavjud bo'lsa) bering — bu uning nisbiy "og'irligini" oshiradi, A va C esa `flex-1` da qoladi, natijada B ikki barobar ko'proq joy oladi. </details>

---

📌 Chapter Summary

Flexbox ikkita o'qqa ega: main axis (justify-*) va cross axis (items-*). flex-colda bu ikkalasi teskari bo'ladi. flex-1 — moslashuvchan layout qurishning kaliti.

🎯 Key Takeaways

• justify-between items-center — eng ko'p ishlatiladigan navbar formulasi
• flex-1 sidebar+content va pricing card kabi moslashuvchan layoutlar uchun
• flex-colda axis'lar teskari bo'lishini yodda tuting

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Konteyner: flex, flex-row, flex-col, flex-wrap
02Main axis: justify-start/center/between/around/evenly
03Cross axis: items-start/center/end/stretch
04Item:      flex-1, grow, shrink, order-*

---