Chapter 9 — Flexbox Chuqur O'rganish

---

9.1 Konteyner Xususiyatlari

Example

styles.css
CSSNusxalash
01.container {
02  display: flex;
03  flex-direction: row;
04  justify-content: space-between;
05  align-items: center;
06  flex-wrap: wrap;
07  gap: 16px;
08}

9.2 Item Xususiyatlari: grow, shrink, basis

Example

styles.css
CSSNusxalash
01.item1 { flex-grow: 1; }  /* Bo'sh joyni egallashda ishtirok etadi */
02.item2 { flex-shrink: 0; } /* Konteyner torayganda kichrayishdan bosh tortadi */
03.item3 { flex-basis: 200px; } /* Boshlang'ich (asosiy) o'lcham */

Mental Model

🧠 flex: 1 1 0 — bu flex-grow: 1; flex-shrink: 1; flex-basis: 0; ning qisqartmasi, va bu barcha elementlarni TENG kenglikda taqsimlaydi.

⚠️ Common Mistake
flex-growni tushunmasdan barcha elementlarga bir xil qiymat berish, kutilmagan teng bo'lmagan natijalarga duch kelish.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: justify-content: space-between va align-items: center bilan navbar yarating.

🟡 Exercise 2 — Medium

Task: 3 ta pricing card yarating, o'rtadagisiga flex-grow: 1.2 berib biroz kattaroq qiling.

🔴 Exercise 3 — Hard

Task: Sidebar (flex-shrink: 0, qattiq kenglik) + Content (flex-grow: 1, qolgan joyni egallaydigan) layout yarating.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.container { display: flex; }
02.item { width: 300px; }

3 ta .item konteyner 500px bo'lsa.

Your Task: Nega barcha itemlar kichraymoqda, garchi width: 300px berilgan bo'lsa ham?

<details> <summary>Solution</summary> Default holatda flex itemlar `flex-shrink: 1`ga ega — konteyner joy yetmasa, ular avtomatik kichrayadi, `width` faqat "taklif" hisoblanadi. Agar aniq 300px saqlanishi kerak bo'lsa, `flex-shrink: 0` qo'shish kerak. </details>

---

📌 Chapter Summary

Flexbox konteyner xususiyatlari (justify-content, align-items, flex-wrap) va item xususiyatlari (flex-grow, flex-shrink, flex-basis) orqali moslashuvchan bir o'lchamli layout yaratadi.

🎯 Key Takeaways

• justify-content — main axis, align-items — cross axis
• flex-shrink: 0 — elementni "qattiq" saqlash uchun
• flex: 1 — moslashuvchan, teng taqsimlangan layout uchun asosiy vosita

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01display: flex;
02flex-direction: row | column;
03justify-content: flex-start | center | space-between | space-around;
04align-items: flex-start | center | flex-end | stretch;
05flex: <grow> <shrink> <basis>;

---