15-dars

O'zing nomla

1. Flexbox nima?

Flexbox (Flexible Box Layout) — bu CSS'dagi layout modeli.

Oddiyroq aytganda:

Flexbox — bir konteyner ichidagi elementlarni tartibli, moslashuvchan va boshqariladigan qilib joylashtirish usuli.

Bu:

bitta qator YOKI bitta ustun bo'ylab ishlaydi.

Shuning uchun: one-dimensional (1D) layout deyiladi.

Flexbox nimani o'zgartirdi?

Flex'dan oldin CSS shunaqa edi:

Har bir element o'zi bilan o'zi

"Yonimdagiga qarab moslash" degan tushuncha yo'q

Brauzer: "mana qo'ydim, endi o'zing bil"

Flexbox bilan esa:

Elementlar bir jamoa bo'lib ishlaydi

Container aytadi:

qaysi yo'nalishda joylashish

bo'sh joyni qanday bo'lish

kim o'ssin, kim qisqarsin

Elementlar esa shu qoidalarga bo'ysunadi.

Texnik ta'rif (aniq)

Flexbox:

display: flex qo'yilgan container

va uning ichidagi direct child elementlar

orasidagi joylashuv algoritmi.

Muhim: ❗ Flex faqat bevosita ichidagi elementlarga ta'sir qiladi ❗ Ichma-ich (nested) bo'lsa — har biri alohida flex bo'ladi

2. Flex container va flex item nima?

Flex'da KIM boshqaradi, KIM bo'ysunadi?

Flexbox'da rollar aniq:

Flex container → boshqaruvchi

Flex item → bo'ysunuvchi

Agar shu mantiqni tushunmasang: ❌ justify-content ishlamaydi ❌ flex-grow tushunarsiz bo'ladi ❌ "nega bunday bo'ldi?" degan savol ko'payadi

1️⃣ Flex container nima?

Flex container — bu:

.parent {
  display: flex;
}

display: flex berilgan element.

👉 Hamma flex qoidalari SHU YERDA boshlanadi.

Container:

yo'nalishni belgilaydi

elementlarni qatorga yoki ustunga qo'yadi

bo'sh joyni qanday taqsimlashni hal qiladi

Muhim:

Flex o'zi uchun emas, ichidagi bolalari uchun ishlaydi.

2️⃣ Flex item nima?

Flex item — bu:

👉 Flex container'ning bevosita ichidagi elementlari.

<div class="parent">
  <div>A</div>   <!-- flex item -->
  <div>B</div>   <!-- flex item -->
</div>

❗ Faqat direct child — flex item bo'ladi ❌ Ichidagi ichidagi element — yo'q

<div class="parent">
  <div>
    <span>Bu flex item EMAS</span>
  </div>
</div>

Bu yerda:

div → flex item

span → oddiy element

Container nimalarni boshqaradi?

Misol uchun:

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

Container aytyapti:

elementlar yonma-yon bo'lsin

bo'sh joy teng taqsimlansin

vertikal markazda tursin

Item'lar:

"xo'p" deb turadi 😄

Item nimalarni boshqaradi?

Flex item:

o'sadimi (flex-grow)

qisqaradimi (flex-shrink)

boshlang'ich o'lchami (flex-basis)

o'zini alohida joylashtirish (align-self)

Ya'ni:

Container — jamoa qoidasi Item — individual xulq