17-dars

O'zing nomla

1. flex-grow nima?

flex-grow nimani hal qiladi?

👉 Container ichida bo'sh joy qoldi. Kim egallaydi? Qancha egallaydi?

Mana shu savolga flex-grow javob beradi.

Default holat

.item {
  flex-grow: 0; /* default */
}

👉 Hech qaysi element o'smaydi. Bo'sh joy — shunchaki bo'sh turadi.

📌 Ko'p odam "nega flex ishlamayapti?" deydi — aslida ishlayapti.

Eng oddiy holat:

.item {
  flex-grow: 1;
}

👉 Natija:

barcha item'lar

bo'sh joyni

teng bo'lib oladi

📌 Bu flex: 1ning asosiy sabablaridan biri.

Nisbiy o'sish

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }

👉 Bo'sh joy:

item1 → 1 qism

item2 → 2 qism

item3 → 1 qism

📌 Px emas. NISBAT

Real UI misol (navbar)

.logo {
  flex-grow: 0;
}

.menu {
  flex-grow: 1;
}

.actions {
  flex-grow: 0;
}

👉 Natija:

menu — o'rtada cho'ziladi

logo va action — o'z hajmida

📌 Juda ko'p ishlatiladi.

flex-grow QACHON ISHLAYDI?

👉 Faqat bo'sh joy bo'lsa.

Agar:

barcha elementlar yig'indisi

container'dan katta bo'lsa

👉 flex-grow ishlamaydi, chunki o'sadigan joy yo'q.

width bilan munosabati

.item {
  width: 200px;
  flex-grow: 1;
}

👉 Dastlab:

200px olinadi

keyin bo'sh joy flex-grow bilan qo'shiladi

📌 flex-grow — qo'shimcha, width — boshlanish.

2. flex-shrink nima?

flex-shrink nimani hal qiladi?

👉 Container ichida joy yetmay qoldi. Qaysi element qanchaga qisqarsin?

Mana shu savolga flex-shrink javob beradi.

Default holat (nega siqilib ketdi?)

.item {
  flex-shrink: 1; /* default */
}

👉 Barcha elementlar:

joy yetmasa

qisqaradi

📌 Ko'p odam "nega button siqilib ketdi?" deydi — mana shu sabab.

flex-shrink: 0 — ENG MUHIM VALUE

.logo {
  flex-shrink: 0;
}

👉 Bu degani:

"Men hech qachon qisqarmayman."

Real joylar:

logo

icon

button

avatar

📌 Navbar'larda majburiy.

Nisbiy qisqarish

.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }

👉 Joy yetmaganda:

item2 → 2 barobar ko'proq qisqaradi

📌 Bu ham nisbat, px emas.

flex-shrink QACHON ISHLAYDI?

👉 Faqat joy yetmaganda.

Agar:

item'lar yig'indisi

container'dan kichik bo'lsa

👉 flex-shrink ishlamaydi.

📌 Bu joyda flex-grow ishlaydi.

Eng ko'p uchraydigan real MUAMMO

.text {
  flex-shrink: 1;
}

Lekin:

text uzun

so'zlar bo'linmaydi

👉 Element qisqarmayotgandek tuyuladi.

Nega? 👉 min-width: auto

Button siqilib ketmasligi uchun

button {
  flex-shrink: 0;
}

👉 Juda muhim UI detali.

flex-grow bilan munosabati

Flex algoritmi:

flex-basis aniqlanadi

Bo'sh joy bormi?

ha → flex-grow

yo'q → flex-shrink

👉 Ikkalasi bir vaqtda ishlamaydi.

3. flex-basis nima?

flex-basis NIMA o'zi?

👉 Flex item'ning boshlang'ich o'lchami.

Ya'ni:

Flex hisob-kitobni QAYERDAN boshlasin?

.item {
  flex-basis: 200px;
}

👉 Flex algoritmi:

Avval flex-basisni oladi

Keyin bo'sh joyni:

flex-grow bilan qo'shadi

yoki flex-shrink bilan qisqartiradi

📌 Demak:

flex-basis — start nuqta

Default value: auto

.item {
  flex-basis: auto; /* default */
}

Bu nimani anglatadi?

👉 Flex shunday deydi:

"Agar width/height bo'lsa — shuni olaman, bo'lmasa — kontent o'lchamidan boshlayman."

flex-basis vs width (ENG MUHIM FARQ)

.item {
  width: 200px;
  flex-basis: auto;
}

👉 Boshlanish = 200px

Lekin:

.item {
  width: 200px;
  flex-basis: 100px;
}

👉 Boshlanish = 100px

📌 Xulosa:

Flex'da flex-basis har doim width'dan ustun

Nima uchun flex: 1 hammani teng qiladi?

.item {
  flex: 1;
}

Bu aslida:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

Qachon flex-basis: auto ishlatish kerak?

👉 Kontent muhim bo'lsa:

button

input

text block

.item {
  flex: auto;
}

Bu:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

👉 Kontentdan boshlaydi, keyin o'sadi.

flex-basis % bilan

.item {
  flex-basis: 50%;
}

👉 Container'ga nisbatan hisoblanadi.

Lekin:

grow/shrink aralashsa

natija o'zgarishi mumkin