16-dars

O'zing nomla

1. Main axis va Cross axis nima?

Flexbox'da "gorizontal" yoki "vertikal" degan tushuncha YO'Q.

Flex faqat shuni biladi:

Main axis

Cross axis

Agar shu ikkisini tushunmasang: ❌ justify-content noto'g'ri ishlatiladi ❌ align-items adashtiriladi ❌ "nega bu pastga tushdi?" degan savol tug'iladi

1️⃣ Main axis nima?

Main axis — bu flex'ning asosiy yo'nalishi.

Uni container belgilaydi:

.container {
  display: flex;
  flex-direction: row; /* default */
}

Agar:

flex-direction: row;

👉 Main axis = gorizontal (chap → o'ng)

Agar:

flex-direction: column;

👉 Main axis = vertikal (tepaga → pastga)

📌 DEMAK:

Main axis = flex-direction yo'nalishi

2️⃣ Cross axis nima?

Cross axis — main axis'ga perpendikulyar yo'nalish.

Agar main axis gorizontal bo'lsa → cross axis vertikal

Agar main axis vertikal bo'lsa → cross axis gorizontal

📌 Cross axis'ni hech qachon o'zing tanlamaysan U avtomatik keladi.

3️⃣ Eng katta xato (hamma qiladi)

Ko'p odam shunaqa o'ylaydi:

❌ justify = gorizontal ❌ align = vertikal

BU NOTO'G'RI ❌

To'g'risi:

✅ justify → MAIN AXIS ✅ align → CROSS AXIS

Har doim shunday. Hech qachon o'zgarmaydi.

4️⃣ Amaliy misol (row)

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Bu yerda:

Main axis → gorizontal

justify-content: center → gorizontal center

Cross axis → vertikal

align-items: center → vertikal center

👉 Klassik "perfect center".

5️⃣ Amaliy misol (column)

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Bu yerda:

Main axis → vertikal

justify-content: center → vertikal center

Cross axis → gorizontal

align-items: center → gorizontal center

⚠️ Ko'p odam shu yerda adashadi.

6️⃣ Qanday eslab qolamiz? (SENIOR TRICK)

Bitta oltin qoida:

justify — qator bo'ylab emas, justify — MAIN AXIS bo'ylab

align — vertikal emas, align — CROSS AXIS bo'ylab

Agar row/column almashsa — natija ham almashadi.

7️⃣ align-content qayerda tushadi?

align-content:

cross axis bo'yicha

qatorlarning guruhini joylashtiradi

faqat flex-wrap: wrap bo'lsa

Agar bitta qator bo'lsa: ❌ align-content ishlamaydi

2. justify-content

.container{
  display:flex;
  justify-content: ...;
}

Value'lar:

1) flex-start (default)

Elementlar main axis boshida.

2) flex-end

Elementlar oxirida.

3) center

Elementlar markazda.

4) space-between

1-element boshida

oxirgisi oxirida

oradagilar orasida teng

chetlarda bo'sh joy yo'q

5) space-around

har bir elementning atrofida "halqa"

chetlardagi bo'sh joy yarim bo'ladi

6) space-evenly

chetlarda ham, elementlar orasida ham bir xil masofa

7) start / end

flex-start/endga o'xshaydi, lekin writing-mode/directionga ko'proq mos. Amalda ko'p ishlatilmaydi, lekin mavjud.

8) left / right

Ba'zi holatlarda ishlaydi, lekin writing-mode va browser farqlari bor. Amalda kam.

9) normal

Ko'pincha flex-start kabi tutadi (defaultga yaqin). Kam ishlatiladi.

10) safe center / unsafe center

justify-content: safe center;

safe → agar center qilganda kontent kesilib qolsa, browser xavfsizroq tomonga suradi

unsafe → baribir center qiladi (kesilib qolsa ham)

Amalda: katta text/katta bloklar va kichik containerlarda foyda beradi.

3. align-items

👉 Elementlar cross axis bo'yicha QANDAY joylashadi

.container {
  align-items: ...;
}

🔹 stretch (default)

align-items: stretch;

Elementlar container balandligiga cho'ziladi

Agar height berilmagan bo'lsa

flex-start

align-items: flex-start;

Tepaga (yoki chapga) yopishadi

🔹 center

align-items: center;

Cross axis bo'yicha markaz

🔹 baseline

align-items: baseline;

Text'larning yozuv chizig'i bo'yicha tekislanadi

Font-size har xil bo'lsa ham

📌 Text-heavy UI'da foydali ❌ Ko'p joyda kerak emas

4. align-self (BITTA ITEM UCHUN)

👉 align-itemsni bitta elementda bekor qiladi

.item {
  align-self: center;
}

Value'lari:

auto (default)

flex-start

flex-end

center

stretch

baseline

📌 Modal ichida bitta button'ni alohida joylashtirish uchun zo'r

5. align-content (KO'P QATOR BO'LGANDA)

❗ BU ENG KO'P CHALKASHADIGAN JOY

👉 Faqat flex-wrap: wrap bo'lsa ishlaydi

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: ...;
}

Bu:

qatorlarning O'ZINI

container ichida joylashtiradi

align-content value'lari:

flex-start

flex-end

center

space-between

space-around

space-evenly

stretch (default)

📌 Grid'ga o'xshash ishlaydi

❗ Agar bitta qator bo'lsa — ishlamaydi