18-dars

O'zing nomla

1. min-width: auto nimaga muammo?

Muammo qayerdan chiqadi?

Flex item'larda default holat:

.item {
  min-width: auto;
}

Bu nimani anglatadi?

👉 "Men o'z kontentimdan kichik bo'lib qisqarmayman."

Nega bu muammo?

Tasavvur qil:

Container: 300px

Item ichida: juda uzun so'z yoki text

.item {
  flex: 1;
}

Sen kutasan: 👉 "Element qisqaradi"

Lekin: ❌ Qisqarmaydi ❌ Layout chiqib ketadi ❌ Scroll paydo bo'ladi

Sabab: 👉 min-width: auto

flex-shrink NIMA UCHUN ISHLAMAYDI?

Aslida ishlayapti, lekin:

flex-shrink qisqartirmoqchi

min-width: auto ruxsat bermaydi

Kontent "men siqilmayman" deydi

👉 min-width flex-shrink'dan kuchliroq

Vizual misol (klassik bug)

Navbar:

.nav {
  display: flex;
}

.title {
  flex: 1;
}

Ichida:

THIS_IS_A_VERY_LONG_TITLE_WITH_NO_SPACES

👉 Natija:

button chiqib ketadi

layout buziladi

TO'G'RI YECHIM

.title {
  min-width: 0;
}

Yoki:

.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

👉 Endi:

flex-shrink ishlaydi

text qisqaradi

UI saqlanadi

📌 min-width: 0 — flex'dagi oltin qoida

Qachon kerak?

👉 Agar item ichida:

text

input

image

iframe

👉 Va item:

flex: 1

yoki flex-grow > 0

📌 90% hollarda kerak bo'ladi.

min-width vs width

.item {
  width: 100px;
  min-width: auto;
}

👉 Baribir kontent ustun keladi.

.item {
  width: 100px;
  min-width: 0;
}

👉 Endi qisqaradi.

2. gap nega margindan yaxshi?

Muammo: margin bilan masofa qo'yish

Ko'p odam shunaqa qiladi:

.item {
  margin-right: 16px;
}

Bu bilan bir nechta muammo chiqadi 👇

1️⃣ Oxirgi element muammosi

Oxirgi elementda ham:

margin-right: 16px;

👉 Natija:

chetda ortiqcha bo'sh joy

dizayn nomutanosib

Shunda:

.item:last-child {
  margin-right: 0;
}

❌ Hack ❌ Qo'shimcha kod ❌ Xato chiqishi mumkin

2️⃣ Yo'nalish o'zgarsa — hammasi buziladi

.container {
  flex-direction: column;
}

Endi:

margin-right ishlamaydi

margin-bottom yozishga majbur bo'lasan

❌ Qayta yozish ❌ Responsive'da muammo

3️⃣ RTL va writing-mode muammosi

margin-left/right:

RTL tillarda (arab, ivrit)

writing-mode o'zgarsa

👉 noto'g'ri ishlaydi

Endi gapga o'tamiz

.container {
  display: flex;
  gap: 16px;
}

👉 Va TAMOM.

gap NIMA QILADI?

Faqat elementlar ORASIGA masofa qo'yadi

Boshiga va oxiriga tegmaydi

Yo'nalishga bog'liq emas

📌 Layout masofasi — container mas'uliyati

4️⃣ gap responsive'da mukammal

.container {
  gap: clamp(8px, 2vw, 24px);
}

👉 Masofa ekran o'lchamiga moslashadi 👉 Qo'shimcha media query yo'q

5️⃣ gap wrap bilan juda kuchli

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

👉 Bu:

row-gap: 12px

column-gap: 24px

margin ishlatiladi:

tashqi masofa (componentlar ORASI)

elementni surish (margin-left: auto)

element o'ziga xos joylashsa

gap ishlatiladi:

ichki elementlar orasidagi masofa

flex/grid layout ichida