CSS flex-grow, flex-shrink va flex-basis: flex algoritmi qanday ishlaydi

Qisqacha: Har flex element uchta son bilan o'lchanadi. flex-basis — boshlang'ich o'lcham (sukut auto: width yoki mazmun). flex-grow — bo'sh joy qolsa, uning qancha ulushini olishi (sukut 0 — olmaydi). flex-shrink — joy yetmasa, qancha qisqarishi (sukut 1). Qisqarish o'lchamga mutanosib: katta element ko'proq qisqaradi. Uchalasi flex qisqa yozuvida yoziladi: flex: 1 = 1 1 0% (hammasi teng), flex: auto = 1 1 auto (mazmunga qarab), flex: none = 0 0 auto (qimirlamaydi).

Bu darsda

• flex-basis va width qaysi biri yutishini bilasiz.
• Bo'sh joy flex-grow bo'yicha qanday bo'linishini qog'ozda hisoblaysiz — natija Chrome bilan piksellab mos keladi.
• flex-shrink ning "vaznli" qisqarishini hisoblaysiz va nega katta element ko'proq qisqarishini tushuntirasiz.
• flex: 1, flex: auto, flex: none farqini aniq aytasiz.
• min-width, max-width va kontent minimumi algoritmni qanday o'zgartirishini bilasiz.

Oldin bilishingiz kerak: Flex'da tekislash, o'rash va gap, box-sizing, O'lchamlar: min va max.

1. Nega bu kerak?

Stajyor «Bahor» menyusining tepasiga uchta tugma qo'ydi: "Osh", "Lag'mon" va "Ko'k choy bilan somsa". Tugmalar qatorni to'liq egallashi kerak. Internetda ikki xil maslahat topdi — flex: auto va flex: 1 — va ikkalasini sinab ko'rdi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  span {
    padding: 8px 0;
    text-align: center;
    color: #fff;
    background-color: var(--rang-asosiy);
  }
  div:first-of-type span {
    flex: auto;
  }
  div:last-of-type span {
    flex: 1;
  }
</style>
<p><code>flex: auto</code></p>
<div><span>Osh</span><span>Lag'mon</span>
  <span>Ko'k choy bilan somsa</span></div>
<p><code>flex: 1</code></p>
<div><span>Osh</span><span>Lag'mon</span>
  <span>Ko'k choy bilan somsa</span></div>

Nimaga qarang: ikkala qator ham butun enni egalladi. Lekin tepada tugmalar har xil kenglikda — uzun matnli tugma kengroq. Pastda esa uchalasi teng. Yozuvda farq bitta so'z, natijada esa butunlay boshqa tartib.

Nega shunday? Buni tushunish uchun brauzer flex elementning o'lchamini qanday hisoblashini ko'rish kerak. Bu darsda o'sha hisobni qo'lda qilamiz. Qo'rqmang — faqat qo'shish, ayirish va bo'lish. Oxirida flex siz uchun "sehr" bo'lmay qoladi: istalgan natijani oldindan ayta olasiz.

2. flex-basis — boshlang'ich o'lcham

2.1 Hisob shu yerdan boshlanadi

flex-basis — flex elementning asosiy o'q bo'yicha boshlang'ich o'lchami: bo'sh joy taqsimlanishidan oldingi o'lcham. row da — en, column da — bo'y. Choyxonadagi dasturxon o'xshatishi: har mehmonga avval bittadan likopcha qo'yiladi (basis), keyin qolgan ovqat ishtahaga qarab bo'linadi.

Qiymatlari:

content qiymati — Baseline ma'lumotiga ko'ra 2022-yildan hamma asosiy brauzerda, 2024-yil sentabrdan keng tarqalgan Baseline.

2.2 flex-basis va width — qaysi biri yutadi?

Ikkalasi ham yozilgan bo'lsa — flex-basis (qiymati auto bo'lmasa). Chrome'da tekshirdik: width: 300px; flex-basis: 100px; li element 100 piksel bo'ldi. width faqat flex-basis: auto bo'lganda o'qiladi.

Yana bir farq: flex-basis faqat asosiy o'q bo'yicha ishlaydi. column konteynerda u bo'yni belgilaydi, width esa baribir en bo'lib qoladi. Shuning uchun flex elementning asosiy o'qdagi o'lchamini flex-basis bilan berish tavsiya etiladi — flex-direction o'zgarsa ham to'g'ri ishlaydi.

flex-basis ham box-sizing ga bo'ysunadi. Kursning reset'i bilan (border-box) flex-basis: 100px — padding va chegara bilan birga 100 piksel.

3. flex-grow — bo'sh joyni bo'lish

3.1 Formula

Barcha elementlar o'z flex-basis ini oldi. Konteynerda joy ortib qoldi — bu bo'sh joy (free space). flex-grow — element shu bo'sh joydan necha ulush olishi. Sukut 0: ulush yo'q, element cho'zilmaydi.

Hisob uch qadam:

1. Bo'sh joy = konteyner eni − hamma flex-basis lar − gap lar (va elementlarning margin, padding, chegaralari, agar ular basis'ga kirmagan bo'lsa).
2. Bitta ulush = bo'sh joy ÷ hamma flex-grow lar yig'indisi.
3. Element o'lchami = flex-basis + o'z flex-grow i × bitta ulush.

Misol. Konteyner 600 piksel, uchta element: har birining flex-basis i 100 piksel, flex-grow i — 1, 2 va 1.

Bo'sh joy:  600 − 3 × 100 = 300
Ulushlar:   1 + 2 + 1 = 4  →  bitta ulush = 300 ÷ 4 = 75
A: 100 + 1 × 75 = 175
B: 100 + 2 × 75 = 250
C: 100 + 1 × 75 = 175      Jami: 175 + 250 + 175 = 600 ✓

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    width: 600px;
    outline: 2px dashed var(--rang-asosiy);
  }
  span {
    padding: 8px 0;
    text-align: center;
    background-color: #d8ecd9;
  }
  span + span {
    background-color: #b8dcbc;
  }
  span:last-child {
    background-color: #d8ecd9;
  }
</style>
<div>
  <span style="flex: 1 1 100px">A: grow 1</span>
  <span style="flex: 2 1 100px">B: grow 2</span>
  <span style="flex: 1 1 100px">C: grow 1</span>
</div>

Nimaga qarang: o'rtadagi B eng keng, lekin A va C dan ikki barobar keng emas. Chrome'da o'lchadik: 175, 250, 175 — hisob bilan bir xil. flex-grow: 2 "ikki barobar katta" degani emas. U "bo'sh joydan ikki barobar ko'p qo'shimcha ol" degani. Basis'lar teng bo'lgani uchun B faqat 75 piksel ortiq oldi.

Bu yerda flex: 1 1 100px — uchala sonning qisqa yozuvi: grow, shrink, basis. Uni «flex — qisqa yozuv» bo'limida ochamiz.

3.2 gap ham avval joy oladi

Xuddi shu uch element, flex-grow hammasida 1, lekin konteynerda gap: 20px:

Bo'sh joy:  600 − 300 − 2 × 20 = 260
Bitta ulush: 260 ÷ 3 = 86.67  →  har element 186.67

Chrome'da o'lchadik: 186.66, 186.67, 186.67. Brauzer pikselning yuzdan bir qismigacha hisoblaydi va yaxlitlash qoldig'ini elementlar orasida bo'ladi — ekranda farq ko'rinmaydi.

3.3 Ulushlar yig'indisi 1 dan kichik bo'lsa

Qiziq istisno: hamma flex-grow lar yig'indisi 1 dan kichik bo'lsa, brauzer bo'sh joyning hammasini emas, faqat shu qismini beradi. 600 piksellik konteynerda bitta element: flex-basis: 100px, flex-grow: 0.25. Bo'sh joy 500, element uning chorakini oladi: 100 + 0.25 × 500 = 225. Chrome'da — 225. Qolgan 375 piksel bo'sh qoladi. Amalda kam uchraydi, lekin "nega cho'zilmadi?" savoliga javob.

Tekshirib ko'ring: Konteyner 500 piksel. Ikki element: flex: 3 1 50px va flex: 1 1 150px. Har biri necha piksel bo'ladi?

4. flex-shrink — yetishmovchilikni ayirish

4.1 Qisqarish "vaznli"

Endi teskari holat: basis'lar yig'indisi konteynerdan katta. Bo'sh joy manfiy — uni elementlardan "ayirish" kerak. flex-shrink — element shu yetishmovchilikning qancha qismini o'z zimmasiga olishi. Sukut 1 — hamma qisqaradi.

Muhim farq: qisqarish ulushi faqat flex-shrink ga emas, flex-shrink × flex-basis ga mutanosib. Katta element ko'proq qisqaradi. Mantiqi oddiy: 300 piksellik va 20 piksellik elementdan teng 50 piksel ayirsangiz, kichigi manfiy bo'lib qolardi.

Misol. Konteyner 400 piksel, ikki element: basis 300 va 200, flex-shrink ikkalasida 1.

Yetishmovchilik:  300 + 200 − 400 = 100
Vaznlar:          A: 1 × 300 = 300,  B: 1 × 200 = 200,  jami 500
A qisqaradi:      100 × 300 ÷ 500 = 60   →  300 − 60 = 240
B qisqaradi:      100 × 200 ÷ 500 = 40   →  200 − 40 = 160

Endi B ga flex-shrink: 3 beramiz:

Vaznlar:          A: 1 × 300 = 300,  B: 3 × 200 = 600,  jami 900
A qisqaradi:      100 × 300 ÷ 900 = 33.33  →  266.67
B qisqaradi:      100 × 600 ÷ 900 = 66.67  →  133.33

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    width: 400px;
    margin-bottom: 12px;
    outline: 2px dashed var(--rang-asosiy);
  }
  span {
    padding: 8px 0;
    text-align: center;
    background-color: #d8ecd9;
  }
  span + span {
    background-color: #b8dcbc;
  }
</style>
<div>
  <span style="flex-basis: 300px">A: 300 → ?</span>
  <span style="flex-basis: 200px">B: 200 → ?</span>
</div>
<div>
  <span style="flex-basis: 300px">A: shrink 1</span>
  <span style="flex: 0 3 200px">B: shrink 3</span>
</div>

Nimaga qarang: birinchi qatorda A 240, B 160 — Chrome'da o'lchadik, hisob bilan bir xil. Ikkalasi ham asl basis'idan bir xil nisbatda — 20 foizga qisqardi. Ikkinchi qatorda B uch barobar "tayyorroq" qisqarishga: 266.67 va 133.33.

4.2 flex-shrink: 0 — "meni siqmang"

flex-shrink: 0 elementni qisqarishdan butunlay ozod qiladi. Qolgan yetishmovchilikni boshqalar bo'lishadi. Qachon kerak:

• Logotip, belgi (ikonka), avatar — qisilsa, shakli buziladi.
• Aniq enli yon panel yoki narx ustuni.

Lekin ehtiyot bo'ling: hamma element flex-shrink: 0 bo'lsa, qisqaradigan hech kim qolmaydi va mazmun konteynerdan chiqib ketadi. Flex'da tekislash darsidagi safe misolidagi flex: none aynan shunday ishladi — element ataylab toshirildi.

4.3 Nozik joy: padding bo'lsa

Vazn aslida mazmun qutisi o'lchamidan olinadi — padding va chegarasiz. Padding'i yo'q elementlarda farq yo'q. Lekin A ga padding: 0 20px va border-box bersak, uning basis'i 300 bo'lsa ham vazni 260 bo'ladi:

Vaznlar:  A: 260,  B: 200,  jami 460
A: 300 − 100 × 260 ÷ 460 = 300 − 56.52 = 243.48
B: 200 − 100 × 200 ÷ 460 = 200 − 43.48 = 156.52

Chrome'da o'lchadik: 243.48 va 156.52. Bu detalni yodlash shart emas — "son biroz boshqacha chiqdi" desa, sababini bilasiz.

Tekshirib ko'ring: Konteyner 300 piksel. Ikki element: basis 200 va 200, flex-shrink 1 va 0. Har biri necha piksel?

5. flex — qisqa yozuv

5.1 To'rtta tayyor qiymat

Uchala xususiyat deyarli doim birga, flex qisqa yozuvida yoziladi: flex: <grow> <shrink> <basis>. Eng ko'p uchraydigan to'rtta qiymat:

Endi «Nega bu kerak?» bo'limidagi sir ochildi:

• flex: auto — har tugma o'z matni enidan boshlaydi (basis auto), bo'sh joyni esa teng qo'shadi. Uzun matnli tugma boshidan keng edi — keng bo'lib qoldi.
• flex: 1 — basis nol. Hamma joy bo'sh joy hisoblanadi va teng bo'linadi. Matn uzunligi ahamiyatsiz.

Aniq sonlar bilan. 600 piksellik konteynerda uch element, width lari 50, 150 va 100:

flex: auto   bo'sh joy 600 − 300 = 300, har biriga +100  →  150, 250, 200
flex: 1      bo'sh joy 600 − 0   = 600, har biriga +200  →  200, 200, 200
flex: none   o'zgarmaydi                                  →   50, 150, 100

Chrome'da uchala qatorni o'lchadik — aynan shu sonlar.

5.2 Qisqa yozuvning tuzog'i

flex: 1 va flex-grow: 1 — bir xil emas. flex-grow: 1 faqat grow'ni o'zgartiradi, basis esa auto da qoladi — natija flex: auto ga o'xshaydi, teng ustun chiqmaydi. flex: 1 esa basis'ni ham 0% ga o'zgartiradi. Chrome'da tekshirdik: flex: 1 yozilgan elementda DevTools → Computed'da flex-basis: 0% ko'rinadi.

CSS nima darsidagi qoida shu yerda ham ishlaydi: qisqa yozuv tushirib qoldirilgan qismlarni o'z qiymatiga qaytaradi. Bitta son (flex: 2) yozsangiz — 2 1 0%. Qoida: doim flex qisqa yozuvini ishlating va nima yozganingizni biling.

Tekshirib ko'ring: flex: 2 va flex: 1 li ikki element 600 piksellik konteynerda. Har biri qancha? Endi flex: 2 1 auto va flex: 1 1 auto bo'lsa-chi, agar ularning mazmuni 100 va 200 piksel bo'lsa?

6. Algoritm to'liq: min va max bilan

6.1 Chegaraga urilgan element "muzlaydi"

Elementlarda min-width yoki max-width bo'lsa (O'lchamlar), brauzer ularni hurmat qiladi. Hisob chegaradan oshsa, element chegarada muzlatiladi va hisob qolganlar uchun qaytadan qilinadi:

flowchart TD
  A["1. Har element: flex-basis"] --> B["2. Bo'sh joy = konteyner<br/>− basis'lar − gap'lar"]
  B --> C{"Bo'sh joy<br/>musbatmi?"}
  C -->|Ha| D["3a. grow ulushlari<br/>bo'yicha qo'sh"]
  C -->|Yo'q| E["3b. shrink × basis<br/>bo'yicha ayir"]
  D --> F{"min yoki max<br/>buzildimi?"}
  E --> F
  F -->|Ha| G["O'sha elementni chegarada<br/>muzlat, qolganlarini<br/>qayta hisobla"]
  G --> B
  F -->|Yo'q| H["Tayyor"]

Nimaga qarang: sikl "min yoki max buzildimi?" savoliga "yo'q" javobi chiqquncha aylanadi. Har aylanishda kamida bitta element muzlaydi, shuning uchun hisob tez tugaydi.

Misol. 600 piksellik konteynerda uchta flex: 1 element, birinchisiga max-width: 120px:

1-aylanish:  har biri 600 ÷ 3 = 200. Birinchisi 120 dan oshdi → 120 da muzlaydi.
2-aylanish:  qolgan joy 600 − 120 = 480, ikkitaga → har biri 240.
Natija:      120, 240, 240

Qisqarishda ham xuddi shunday. 400 piksellik konteyner, basis 300 va 200, lekin A da min-width: 280px:

1-aylanish:  A 240, B 160 (yuqoridagi hisob). A 280 dan kichik → 280 da muzlaydi.
2-aylanish:  B uchun joy 400 − 280 = 120 → B 120.

Chrome'da ikkala misolni o'lchadik: 120, 240, 240 va 280, 120.

6.2 Kontent minimumi: flex element so'zni sindirmaydi

Bitta chegara yashirin — siz uni yozmaysiz, lekin u bor. Flex elementning min-width sukut qiymati 0 emas, auto. Flex elementda auto — "mazmunimning eng kichik eni": eng uzun so'z yoki rasm eni (min-content, O'lchamlar darsidan). Element undan torroq qisqarmaydi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: flex;
    gap: 8px;
    width: 220px;
    padding: 8px;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-karta > span:first-child {
    flex: 1;
    background-color: #d8ecd9;
  }
  .narx {
    flex: none;
    color: var(--rang-urgu);
  }
</style>
<div class="taom-karta">
  <span>rustam.oshpaz@example.com</span>
  <span class="narx">35 000 so'm</span>
</div>

Nimaga qarang: narx karta chegarasidan o'ngga chiqib ketdi. Aybdor — email. Unga flex: 1 berilgan, ya'ni "qisqarishga tayyorman". Lekin email — bitta uzun so'z, uni bo'lib bo'lmaydi. Element o'z so'zidan torroq bo'lishga "ko'nmadi" — algoritm uni min-content da muzlatdi, narxga esa joy qolmadi.

Bu flex'dagi eng mashhur tuzoqlardan biri. Yechimi — min-width: 0 — keyingi darsda, matnni "…" bilan qisqartirish bilan birga.

7. Amalda: kartalar o'zi moslashadi

Bilimlarni birlashtiramiz. «Bahor» menyusida to'rtta karta: har biri kamida 14rem, bo'sh joy bo'lsa — teng cho'ziladi, sig'masa — keyingi qatorga o'raladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .taom-karta {
    flex: 1 1 14rem;
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
    border-radius: 8px;
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p class="narx">35 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p class="narx">28 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Manti</h3>
    <p class="narx">30 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Ko'k choy</h3>
    <p class="narx">5 000 so'm</p>
  </article>
</section>

Nimaga qarang: uchta ekranda uch xil tartib, lekin birorta ham @media yo'q. Qo'lda hisoblaymiz (natija oynasida body ning 8 piksellik margin'i bor), 14rem = 224:

• 360 piksel — joy 344. Ikki karta: 224 + 16 + 224 = 464 > 344. Har karta o'z qatorida, 344 gacha cho'ziladi.
• 800 piksel — joy 784. Uchta karta: 3 × 224 + 2 × 16 = 704 ≤ 784, to'rtinchisi sig'maydi. Birinchi qatorda bo'sh joy 80, har kartaga +26.67 → 250.67. To'rtinchi karta ikkinchi qatorda yolg'iz — butun 784 ga cho'ziladi.
• 1280 piksel — joy 1264. To'rttasi: 4 × 224 + 3 × 16 = 944, bo'sh joy 320, har biriga +80 → 304.

Chrome'da uchala enni o'lchadik — sonlar hisob bilan bir xil.

800 piksellik ekrandagi yolg'iz keng karta — flex'ning tabiati: har qator o'z bo'sh joyini o'zi bo'ladi. Oxirgi qatordagi kartalar ham tepadagilar enida qolishi kerak bo'lsa — bu Grid ishi: repeat(auto-fit, minmax(...)). Media query'siz moslashuvchan layout g'oyasini esa Intrinsic layout darsida chuqurroq ko'ramiz.

8. Ko'p uchraydigan xatolar

8.1 flex-grow: 1 yozdim, ustunlar teng emas

Basis auto qoldi — mazmun uzunligi farq qiladi. Tuzatish: flex: 1 (basis 0).

8.2 width ishlamayapti

Elementda flex-basis (yoki uni o'z ichiga olgan flex: 1) bor — u width dan ustun. Tuzatish: o'lchamni flex-basis da bering yoki flex: 0 0 200px bilan "qimirlama" deng.

8.3 Logotip yoki belgi siqilib qoldi

Sukut flex-shrink: 1 — tor ekranda hamma qisqaradi, belgi ham. Tuzatish: belgiga flex-shrink: 0 (yoki flex: none).

8.4 "Qisqarmayapti, konteynerdan chiqib ketyapti"

Kontent minimumi: uzun so'z, URL yoki keng rasm. Tuzatish: min-width: 0 (keyingi dars).

8.5 flex: 2 "ikki barobar keng" bermadi

Basis nol bo'lmasa, grow faqat qo'shimcha joyni bo'ladi. Tuzatish: aniq nisbat kerak bo'lsa — basis'lar teng (odatda 0) bo'lsin: flex: 2 va flex: 1.

9. Mashqlar

Har mashqda avval qog'ozda hisoblang, keyin natija blokida DevTools bilan tekshiring.

1-mashq (oson): Uch ustun

Konteyner 900 piksel, gap: 30px. Elementlar: flex: 1 1 100px, flex: 1 1 200px, flex: 2 1 100px. Har biri necha piksel?

2-mashq (o'rta): Siqilgan qator

Konteyner 500 piksel. Elementlar: flex: 0 1 400px, flex: 0 2 300px, flex: 0 0 100px. Har biri necha piksel? Qaysi element eng ko'p qisqaradi?

3-mashq (qiyin): Muzlash

Konteyner 700 piksel, gap: 20px. To'rtta element flex: 1. Ikkinchisida min-width: 250px, to'rtinchisida max-width: 100px. Har biri necha piksel? Nechta aylanish kerak bo'ldi?

Ishora: gap avval ayiriladi. «Chegaraga urilgan element "muzlaydi"» bo'limidagi sxema bo'yicha boring. Bitta aylanishda ham min, ham max buzilsa, brauzer ularning hammasini birdan muzlatmaydi. U buzilishlarni qo'shadi: min tomonga yetmay qolgan piksellar (+) va max dan oshgan piksellar (−). Yig'indi musbat bo'lsa — shu aylanishda faqat min ni buzganlar muzlaydi, manfiy bo'lsa — faqat max ni buzganlar. Keyin qayta hisoblang.

4-mashq: Portfolio qadami — "Men haqimda" dagi bilimlar ro'yxati

"Men haqimda" sahifasidagi bilimlar ro'yxati (dl) hozir ustma-ust: atama (dt), ostida uning izohi (dd) chapdan 40 piksel ichkarida. Uni "ikki ustunli jadval"ga aylantiring:

1. Kompyuterda: chapda atama — qat'iy 8rem, o'ngda izoh — qolgan butun joy.
2. Telefonda: izoh sig'masa, atama ostiga tushsin va butun enni olsin. @media ishlatmang.
3. Atama qalin bo'lsin, izohning brauzer bergan chap margin'i olib tashlansin.
4. 360 va 1280 piksel enda izohning enini hisoblang va DevTools bilan tekshiring.

Ishora: dl — flex, o'raladigan. dt — cho'zilmaydi, qisqarmaydi, basis 8rem. dd — basis katta (masalan 20rem), cho'ziladi. Atama va izoh orasida gap.

/* Men haqimda: bilimlar ro'yxati — ikki ustun, tor ekranda bitta */
dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

dt {
  flex: 0 0 8rem;
  font-weight: bold;
}

dd {
  flex: 1 1 20rem;
  margin: 0;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
    line-height: 1.5;
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h2 {
    color: var(--rang-asosiy);
  }
  dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  dt {
    flex: 0 0 8rem;
    font-weight: bold;
  }
  dd {
    flex: 1 1 20rem;
    margin: 0;
  }
</style>
<main>
  <h2>Bilimlarim</h2>
  <dl>
    <dt>HTML</dt>
    <dd>Semantika, formalar, jadvallar, accessibility, SEO.</dd>
    <dt>Vositalar</dt>
    <dd>VS Code, terminal, DevTools, Prettier, html-validate.</dd>
    <dt>O'rganyapman</dt>
    <dd>CSS, keyin JavaScript.</dd>
  </dl>
</main>

10. Real ishda

• flex: 1 va flex: none — eng ko'p yoziladigan ikki qiymat. Birinchisi "qolgan joyni ol" (qidiruv maydoni, asosiy ustun), ikkinchisi "o'z o'lchamingda tur" (belgi, tugma).
• flex: 1 1 <basis> + flex-wrap — media query'siz moslashuvchan kartalar va forma qatorlari. Bu naqshni Intrinsic layout darsida "switcher" nomi bilan ko'rasiz.
• DevTools flex elementni tanlaganda Computed'da flex-basis ni va "Flexbox" bo'limida elementning yakuniy o'lchamini ko'rsatadi — hisobingizni shu bilan tekshiring.
• Intervyuda so'raladi: "flex: 1 nimaning qisqasi?", "flex: 1 va flex: auto farqi?", "Nega flex element qisqarmayapti?", "flex-basis va width farqi?".

Xulosa

• flex-basis — boshlang'ich o'lcham; auto bo'lsa width yoki mazmun, aks holda width dan ustun.
• Grow: bo'sh joy ÷ grow yig'indisi = bitta ulush; element basis + o'z ulushlari.
• Shrink vaznli: yetishmovchilik shrink × basis ga mutanosib bo'linadi — katta element ko'proq qisqaradi.
• flex: 1 = 1 1 0% (teng), flex: auto = 1 1 auto (mazmundan), flex: none = 0 0 auto (qimirlamaydi).
• min/max ga urilgan element muzlaydi, qolganlari qayta hisoblanadi.
• Flex elementning min-width i auto — uzun so'zdan torroq qisqarmaydi.

Keyingi dars: align-self, order, auto margin va min-width: 0 — bitta elementni alohida tekislash, tartibni o'zgartirish xavfi va flex'ning ikki mashhur tuzog'ini hal qilish.

Manbalar

• MDN: "Controlling ratios of flex items along the main axis", "flex", "flex-basis", "flex-grow", "flex-shrink" — developer.mozilla.org
• W3C: "CSS Flexible Box Layout Module Level 1", 9.7 "Resolving Flexible Lengths" — w3.org/TR/css-flexbox-1
• web-features (Baseline ma'lumotlari): "flexbox" (flex-basis: content) — github.com/web-platform-dx/web-features