CSS Flexbox tekislash: justify-content, align-items, flex-wrap va gap

Qisqacha: Flex konteynerda justify-content elementlarni asosiy o'q bo'ylab joylaydi (boshga, oxirga, o'rtaga yoki orasiga teng joy qoldirib), align-items esa ko'ndalang o'q bo'ylab tekislaydi — uning sukut qiymati stretch, ya'ni cho'zish. Ko'p qatorli tartib uchun flex-wrap: wrap sig'magan elementlarni keyingi qatorga o'tkazadi, align-content esa shu qatorlar guruhini joylaydi. Elementlar orasidagi joy — gap: u faqat orasiga tushadi, chetlarga emas.

Bu darsda

• gap, row-gap va column-gap bilan margin'siz oraliq qo'yasiz.
• justify-content ning oltita asosiy qiymati orasidagi bo'sh joyni piksellab hisoblaysiz.
• align-items ning sukut qiymati nega rasmni cho'zib yuborishini tushuntirasiz.
• flex-wrap bilan ko'p qatorli tartib qurasiz va align-content qachon ishlashini bilasiz.
• safe kalit so'zi bilan markazlangan kontent "yo'qolib qolishi"ning oldini olasiz.

Oldin bilishingiz kerak: Flexbox'ga kirish, Margin sirlari, Overflow.

1. Nega bu kerak?

Flexbox'ga kirish darsida uchta ish chala qoldi:

• Menyu havolalari bir qatorga tushdi, lekin bir-biriga yopishdi: "Bosh sahifaMen haqimda". Oraliq uchun har li ga margin-right yozdik — oxirgisining o'ngida keraksiz joy qoldi.
• Taom kartasida narx sarlavha bilan bir chiziqda emas, kartaning tepasida turdi.
• Telefonda katta shrift bilan menyu sig'madi va havolalar siqilib, ikki qatorga bo'linib ketdi.

Uchalasi ham tekislash masalasi. Bu darsda flex konteynerning to'rtta "tekislash dastagini" o'rganamiz. Esda tuting: flex'da "chap-o'ng" yo'q, "asosiy o'q" va "ko'ndalang o'q" bor. Har xususiyat shu o'qlardan biriga tegishli.

2. gap — elementlar orasidagi joy

2.1 Margin'dan nimasi yaxshi

Margin sirlari darsida "oraliqni komponent emas, layout beradi" degan edik va * + * naqshini ishlatdik. O'shanda va'da qilgandik: flex va grid'da bundan oddiy yo'l bor. Mana u:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  ul {
    display: flex;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    border: 2px dashed var(--rang-asosiy);
  }
  li {
    padding: 4px 8px;
    background-color: #d8ecd9;
  }
  ul:first-of-type li {
    margin-right: 16px;
  }
  ul:last-of-type {
    gap: 16px;
  }
</style>
<p>❌ Har elementga margin-right:</p>
<ul>
  <li>Menyu</li><li>Bron</li><li>Aloqa</li><li>Blog</li>
</ul>
<p>✅ Konteynerga gap:</p>
<ul>
  <li>Menyu</li><li>Bron</li><li>Aloqa</li><li>Blog</li>
</ul>

Nimaga qarang: ikkala qatorda ham elementlar orasida 16 piksel. Birinchisida "Blog" dan keyin ham 16 piksel ortiqcha joy bor — bu oxirgi elementning margin'i. Ikkinchisida yo'q: gap faqat qo'shni elementlar orasiga joy qo'yadi, konteyner chetlariga emas. Chrome'da o'lchadik: birinchi qatorda oraliqlar uchun jami 64 piksel ketdi (4 × 16), ikkinchisida — 48 (3 × 16).

gap konteynerga yoziladi, bitta qoida bilan. Element qo'shsangiz, olib tashlasangiz yoki tartibini o'zgartirsangiz — oraliq o'zi to'g'ri qoladi. Margin'lar qo'shilishi ham yo'q.

2.2 Ikki yo'nalish: row-gap va column-gap

Elementlar bir necha qatorga o'ralsa (buni pastroqda, «flex-wrap» bo'limida ko'ramiz), oraliq ikki xil bo'ladi:

• column-gap — bir qatordagi elementlar orasida (qator bo'ylab, yonma-yon).
• row-gap — qatorlar orasida (ustma-ust).
• gap — ikkalasining qisqa yozuvi. Bitta qiymat — ikkalasiga ham. Ikki qiymat: avval row-gap, keyin column-gap.

/* qatorlar orasi 0.5rem, yonma-yon elementlar orasi 1rem */
.taom-karta {
  gap: 0.5rem 1rem;
}

Nomlar biroz chalkash tuyulishi tabiiy. Eslab qolish yo'li: row-gap — qatorlar (rows) orasidagi gap, column-gap — ustunlar orasidagi. flex-direction o'zgarsa ham nomlar o'zgarmaydi.

Maslahat: Eski maqolalarda "flex'da gap Safari'da ishlamaydi, margin ishlating" degan maslahatni uchratasiz. Bu eskirgan. Baseline ma'lumotiga ko'ra flex'dagi gap 2021-yil apreldan hamma asosiy brauzerda bor, 2023-yil oktabrdan esa keng tarqalgan Baseline.

3. justify-content — asosiy o'q bo'ylab

3.1 Oltita asosiy qiymat

Konteynerda elementlardan ortib qolgan joy bor. justify-content shu joyni asosiy o'q bo'ylab qayerga qo'yishni hal qiladi. Qiymatlar:

Ko'rib chiqamiz. Har konteyner 400 piksel, ichida 60 pikseldan uchta element:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    width: 400px;
    margin-bottom: 8px;
    outline: 2px dashed var(--rang-asosiy);
  }
  span {
    width: 60px;
    background-color: #d8ecd9;
    text-align: center;
  }
  code {
    display: block;
  }
</style>
<code>flex-start</code>
<div><span>1</span><span>2</span><span>3</span></div>
<code>flex-end</code>
<div style="justify-content: flex-end">
  <span>1</span><span>2</span><span>3</span></div>
<code>center</code>
<div style="justify-content: center">
  <span>1</span><span>2</span><span>3</span></div>
<code>space-between</code>
<div style="justify-content: space-between">
  <span>1</span><span>2</span><span>3</span></div>
<code>space-around</code>
<div style="justify-content: space-around">
  <span>1</span><span>2</span><span>3</span></div>
<code>space-evenly</code>
<div style="justify-content: space-evenly">
  <span>1</span><span>2</span><span>3</span></div>

Nimaga qarang: pastdagi uchta qatorda elementlar orasidagi masofa har xil. Buni qo'lda hisoblaymiz. Ortib qolgan joy: 400 − 3 × 60 = 220 piksel.

• space-between: chetlarga hech narsa, 220 ikki oraliqqa bo'linadi — har biri 110. Elementlar boshlanadigan nuqtalar: 0, 170, 340.
• space-around: har elementga ikki tomondan teng yostiq. 220 ÷ 3 = 73.33 — bitta element yostig'i, ikki chetga yarmidan: 36.67. Chetda 36.67, elementlar orasida ikki yarim yostiq — 73.33. Boshlanish nuqtalari: 36.67, 170, 303.33.
• space-evenly: to'rtta bir xil oraliq (ikki chet va ikki o'rta) — 220 ÷ 4 = 55. Boshlanish nuqtalari: 55, 170, 285.

Chrome'da o'lchadik — uchala qatordagi nuqtalar hisobimiz bilan bir xil (yaxlitlash farqi 0.01 piksel). Uchala holatda ham o'rtadagi element aynan markazda: 170 + 30 = 200.

3.2 justify-content qachon ishlamaydi

Bo'sh joy yo'q bo'lsa, taqsimlaydigan narsa ham yo'q. Elementlar konteynerni to'liq egallasa, justify-content hech narsa qilmaydi. Masalan, kelgusi darsda o'rganadigan flex-grow elementlarni bo'sh joyga cho'zadi — shundan keyin justify-content ta'sirsiz qoladi.

Shuningdek, u faqat asosiy o'q bo'ylab ishlaydi. flex-direction: column da asosiy o'q vertikal — justify-content: center elementlarni tepa-pastdan o'rtaga qo'yadi. Konteynerning bo'yi mazmunga teng bo'lsa (odatda shunday), vertikal bo'sh joy yo'q va hech narsa o'zgarmaydi.

3.3 flex-start va start — teskari yo'nalishda farq

Yangi kodda start va end qiymatlarini ham uchratasiz. Oddiy row da ular flex-start va flex-end bilan bir xil. Farq teskari yo'nalishda chiqadi:

• flex-start — asosiy o'q boshiga. row-reverse da asosiy o'q o'ngdan boshlanadi — elementlar o'ng chetda.
• start — matn yo'nalishi boshiga. O'zbekcha sahifada — doim chap chet, row-reverse da ham.

Chrome'da tekshirdik: row-reverse + start da elementlar chapga yig'ildi, lekin tartibi teskari qoldi: 3, 2, 1. left va right qiymatlari ham bor — ular matn yo'nalishiga qaramay, doim chap va o'ng. Kundalik ishda flex-start/flex-end yoki start/end yetarli. Aralashtirmang: bitta loyihada bitta uslub.

Tekshirib ko'ring: 500 piksellik konteynerda 100 pikseldan ikkita element bor. space-evenly da birinchi element qayerdan boshlanadi?

4. align-items — ko'ndalang o'q bo'ylab

4.1 Beshta qiymat

align-items — har qator ichidagi elementlarni ko'ndalang o'q bo'ylab tekislaydi. Oddiy row da — tepa-past bo'yicha:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  div {
    display: flex;
    gap: 8px;
    height: 80px;
    margin-bottom: 8px;
    outline: 2px dashed var(--rang-asosiy);
  }
  div > * {
    margin: 0;
    padding: 0 6px;
    background-color: #d8ecd9;
  }
  h3 {
    font-size: 1.75rem;
  }
  .narx {
    color: var(--rang-urgu);
  }
  code {
    display: block;
  }
</style>
<code>stretch (sukut)</code>
<div><h3>Osh</h3><span class="narx">35 000 so'm</span></div>
<code>flex-start</code>
<div style="align-items: flex-start">
  <h3>Osh</h3><span class="narx">35 000 so'm</span></div>
<code>center</code>
<div style="align-items: center">
  <h3>Osh</h3><span class="narx">35 000 so'm</span></div>
<code>flex-end</code>
<div style="align-items: flex-end">
  <h3>Osh</h3><span class="narx">35 000 so'm</span></div>
<code>baseline</code>
<div style="align-items: baseline">
  <h3>Osh</h3><span class="narx">35 000 so'm</span></div>

Nimaga qarang: stretch da ikkala yashil blok ham 80 piksellik konteynerning butun bo'yiga cho'zilgan. Qolganlarida bloklar o'z bo'yida. center da ular o'rtada, lekin katta "Osh" va kichik narxning harflari bir chiziqda emas. baseline da esa ikkala matnning pastki chizig'i bir xil — ko'z uchun eng tekisi.

Asosiy chiziq (baseline) — harflar "o'tiradigan" xayoliy chiziq, daftardagi qator chizig'i kabi. O'lchami turli matnlarni yonma-yon qo'yganda baseline eng chiroyli natija beradi. Flexbox'ga kirish darsining 2-mashqidagi narx muammosi — aynan shu: .taom-karta { align-items: baseline; }.

4.2 stretch tuzog'i: cho'zilgan rasm

stretch elementni faqat uning ko'ndalang o'lchami auto bo'lsa cho'zadi. Elementga height bersangiz, u cho'zilmaydi. Muammo shundaki, Rasm va media darsidagi reset rasmga aynan height: auto beradi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  article {
    display: flex;
    gap: 12px;
    max-width: 22rem;
    margin-bottom: 12px;
    border: 2px solid var(--rang-asosiy);
  }
  article + article {
    align-items: flex-start;
  }
  p {
    margin: 0;
  }
</style>
<article>
  <img alt="" width="100" height="100"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='100' height='100'><circle cx='50' cy='50' r='48'
    fill='%232f6b3a'/></svg>">
  <p>❌ Osh — Toshkent usulida, bedana tuxumi va qazi bilan.
  Choyxonaning eng mashhur taomi. Har kuni 12:00 dan tortiladi,
  qozon tugaguncha. Kechqurun kelsangiz, oldindan so'rang.</p>
</article>
<article>
  <img alt="" width="100" height="100"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='100' height='100'><circle cx='50' cy='50' r='48'
    fill='%232f6b3a'/></svg>">
  <p>✅ Osh — Toshkent usulida, bedana tuxumi va qazi bilan.
  Choyxonaning eng mashhur taomi. Har kuni 12:00 dan tortiladi,
  qozon tugaguncha. Kechqurun kelsangiz, oldindan so'rang.</p>
</article>

Nimaga qarang: birinchi kartada doira cho'zilib, tuxumga aylandi — matn rasmdan balandroq, rasm esa uning bo'yiga cho'zildi. Chrome'da o'lchadik: 100 × 100 lik rasm 100 × 111 bo'ldi. Ikkinchi kartada align-items: flex-start — rasm o'z bo'yida, tepada. Tor ekranda (matn ko'proq qatorga o'ralganda) farq yanada kattalashadi. Rasm yoki video bor flex qatorda stretch ni doim o'chiring.

4.3 column da align-items gorizontal

O'qlar burilsa, align-items ham buriladi. Flexbox'ga kirish darsidagi bron formasida maydonlar butun enga cho'zilgan edi — bu stretch edi. Konteynerga align-items: flex-start yozsangiz, maydonlar va yorliqlar o'z enicha qolib, chapga yig'iladi. Tugmalar ustunida bu foydali: tugma butun enga cho'zilmasin desangiz — align-items: flex-start.

Tekshirib ko'ring: row konteynerda bo'yi 60 piksel. Elementlardan biriga height: 20px berilgan, align-items yozilmagan. U necha piksel baland bo'ladi?

5. flex-wrap — keyingi qatorga o'rash

5.1 nowrap va wrap

Sukut bo'yicha flex bitta qator — flex-wrap: nowrap. Joy yetmasa, elementlar siqiladi, keyin konteynerdan chiqib ketadi. flex-wrap: wrap — sig'magan element keyingi qatorga o'tadi. Har qator — alohida flex qatori (flex line).

«Bahor» menyu sahifasining tepasida bo'limlar ro'yxati bor. Telefonda ular bir qatorga sig'maydi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
  }
  nav a {
    display: block;
    padding: 4px 12px;
    color: var(--rang-asosiy);
    border: 2px solid currentColor;
    border-radius: 999px;
  }
</style>
<nav aria-label="Menyu bo'limlari">
  <ul>
    <li><a href="#birinchi">Birinchi taomlar</a></li>
    <li><a href="#ikkinchi">Ikkinchi taomlar</a></li>
    <li><a href="#salatlar">Salatlar</a></li>
    <li><a href="#somsa">Somsa va non</a></li>
    <li><a href="#ichimliklar">Ichimliklar</a></li>
    <li><a href="#shirinliklar">Shirinliklar</a></li>
  </ul>
</nav>

Nimaga qarang: telefon tugmasini bosing — bo'limlar uch qatorga o'raldi, har biri o'z enida qoldi. Kompyuterda hammasi bitta qatorda. Qatorlar orasida ham, elementlar orasida ham 8 piksel — gap ikkala yo'nalishga ishladi. Hech qayerda qat'iy son yo'q: ekran torayishi bilan elementlar o'zi joy topadi.

Oxirgi qatorga e'tibor bering: unda elementlar kam va ular chapga yig'ilgan. Har flex qatori mustaqil — elementlar tepadagi qator bilan "ustun" bo'lib tekislanmaydi. Ustunlarga tekislash kerak bo'lsa — bu Grid ishi.

flex-wrap: wrap-reverse ham bor — qatorlar pastdan tepaga teriladi. Kamdan-kam kerak bo'ladi.

5.2 flex-flow — qisqa yozuv

flex-direction va flex-wrap ko'pincha birga yoziladi. Ularning qisqa yozuvi — flex-flow:

nav ul {
  flex-flow: row wrap; /* flex-direction: row; flex-wrap: wrap; */
}

CSS nima darsidagi qisqa yozuv qoidasini eslang: flex-flow: wrap desangiz, flex-direction sukut qiymatiga (row) qaytadi.

6. align-content — qatorlar guruhini joylash

6.1 Faqat bir necha qator bo'lsa

align-items har qator ichida tekislaydi. align-content esa qatorlarning o'zini — butun guruhni — ko'ndalang o'q bo'ylab joylaydi. Qiymatlari justify-content nikiga o'xshaydi: flex-start, center, space-between va boshqalar, sukut bo'yicha esa qatorlar cho'ziladi (stretch kabi).

Shart: konteyner flex-wrap: wrap bo'lishi kerak. Chrome'da tekshirdik: nowrap konteynerda align-content: center hech narsa qilmadi. wrap konteynerda esa — hatto bitta qator bo'lsa ham — qatorni o'rtaga surdi. Ikkinchi shart: ko'ndalang o'qda bo'sh joy bo'lsin, ya'ni konteyner qatorlardan balandroq bo'lsin.

6.2 "Qatorlar nega bir-biridan uzoq?"

Bu align-content bilan eng ko'p uchraydigan holat. Konteynerga min-height berildi, elementlar o'raldi — va qatorlar orasida kutilmagan katta bo'shliq paydo bo'ldi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 280px;
    min-height: 160px;
    margin: 0 0 12px;
    padding: 8px;
    list-style: none;
    outline: 2px dashed var(--rang-asosiy);
  }
  li {
    padding: 4px 12px;
    background-color: #d8ecd9;
  }
  ul + ul {
    align-content: flex-start;
  }
</style>
<ul>
  <li>Osh</li><li>Lag'mon</li><li>Manti</li><li>Somsa</li>
  <li>Sho'rva</li><li>Kabob</li>
</ul>
<ul>
  <li>Osh</li><li>Lag'mon</li><li>Manti</li><li>Somsa</li>
  <li>Sho'rva</li><li>Kabob</li>
</ul>

Nimaga qarang: birinchi ro'yxatda ikki qator bo'sh joyni teng bo'lib olgan — ular orasida gap dan ancha katta bo'shliq, yashil bloklar esa cho'zilib, balandlashgan. Sukut qiymati qatorlarni konteyner bo'yiga "cho'zdi". Ikkinchi ro'yxatda align-content: flex-start — qatorlar tepaga yig'ildi, orasida faqat 8 piksel.

Tekshirib ko'ring: Konteynerda flex-wrap yozilmagan, lekin align-content: space-between bor. Ekranda nima o'zgaradi?

7. safe — markazlangan kontent yo'qolmasin

7.1 Muammo: chap tomonga "kirib ketish"

center ga bitta xavf bor. Elementlar konteynerdan kengroq bo'lsa, ular ikki tomonga teng toshadi — chapga ham. Overflow darsidan eslang: skroll konteynerni faqat o'ngga va pastga aylantirish mumkin. Chapga toshgan qism butunlay yo'qoladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    justify-content: center;
    width: 200px;
    margin-bottom: 12px;
    overflow-x: auto;
    border: 2px solid var(--rang-asosiy);
  }
  span {
    flex: none;
    width: 300px;
    background-color: #d8ecd9;
  }
  div + div {
    justify-content: safe center;
  }
</style>
<div><span>Osh · Lag'mon · Manti · Somsa · Kabob</span></div>
<div><span>Osh · Lag'mon · Manti · Somsa · Kabob</span></div>

Nimaga qarang: birinchi blokda "Osh" ko'rinmaydi, uni skroll bilan ham chiqarib bo'lmaydi. Chrome'da o'lchadik: 300 piksellik element 200 piksellik konteynerda 50 piksel chapga toshdi, skroll esa faqat 250 piksel masofani ko'rsatadi. Ikkinchi blokda "Osh" joyida, qolganini skroll bilan o'qish mumkin. Bu yerdagi flex: none — "siqilma" degani, uni keyingi darsda ochamiz.

7.2 safe center

safe kalit so'zi brauzerga aytadi: "joy yetsa — markazla, toshsa — boshdan tur". U justify-content, align-items va align-content ning qiymati oldiga yoziladi: safe center, safe flex-end.

Bu yangi imkoniyat. Baseline ma'lumotiga ko'ra flex'dagi safe 2024-yil 29-iyuldan Baseline: Chrome va Edge 115, Firefox 63, Safari 17.6. Eski brauzer safe center ni tushunmaydi va deklaratsiyani tashlab ketadi. Shuning uchun CSS nima darsidagi "kechirimli o'qish" dan foydalanib, zaxira yozamiz:

.taom-karta {
  justify-content: center;      /* eski brauzer uchun */
  justify-content: safe center; /* yangisi buni oladi */
}

Eski brauzer ikkinchi qatorni tashlaydi va birinchisini qo'llaydi. Yangisi esa ikkalasini ham tushunadi — keyingisi yutadi.

8. Bir jadvalda: kim, qaysi o'qda

Qaysi birini tanlashni sxemada ko'raylik:

flowchart TD
  A["Nimani surmoqchisiz?"] --> B["Asosiy o'q bo'ylab<br>(elementlar tiziladigan)"]
  A --> C["Ko'ndalang o'q bo'ylab"]
  B --> D["justify-content"]
  C --> E["Har qator ichidagi<br>elementlarni"]
  C --> F["Qatorlar guruhini<br>(faqat wrap)"]
  E --> G["align-items"]
  F --> H["align-content"]

Nomlardagi qoida: justify- — asosiy o'q, align- — ko'ndalang o'q. -content — guruhni (hamma elementlar yoki hamma qatorlar birga), -items — har elementni alohida. Keyingi darslarda bitta elementni alohida tekislaydigan align-self ni ham ko'rasiz — -self "o'zi" degani.

9. Ko'p uchraydigan xatolar

9.1 align-items: center ishlamayapti

Konteynerning bo'yi mazmunga teng — vertikal bo'sh joy yo'q, o'rtaga suradigan narsa ham yo'q. Tuzatish: konteynerga bo'y bering (min-height) yoki DevTools'da uning haqiqiy bo'yini tekshiring. Butun ekran bo'yicha markazlashni Flex naqshlari darsida ko'ramiz.

9.2 justify-content: center vertikal markazladi

flex-direction: column da asosiy o'q vertikal. Tuzatish: avval o'qni aniqlang: column da gorizontal markaz — align-items: center.

9.3 Rasm cho'zilib ketdi

Sukut stretch + rasmdagi height: auto. Tuzatish: align-items: flex-start (yoki center).

9.4 O'ralgan qatorlar bir-biridan uzoq

Konteyner balandroq va align-content sukutda — qatorlar cho'zildi. Tuzatish: align-content: flex-start.

9.5 Oraliq ikki barobar

gap: 1rem yozildi, lekin elementlarda eski margin-right: 1rem qolgan — oraliq 2rem. Tuzatish: flex'ga o'tganda elementlardan tashqi margin'larni olib tashlang, oraliqni faqat gap bersin.

10. Mashqlar

1-mashq (oson): Taom kartasi — nom chapda, narx o'ngda

Flexbox'ga kirish darsining 2-mashqini davom ettiring: karta ichida nom va narx bitta chiziqda (asosiy chiziq bo'yicha), nom chap chetda, narx o'ng chetda.

<article class="taom-karta">
  <h3 class="taom-nomi">Manti</h3>
  <span class="narx">30 000 so'm</span>
</article>

Ishora: ikki chet — ortib qolgan joy faqat orasiga ketadigan qiymat. Bir chiziq — align-items ning matn chizig'i bo'yicha tekislaydigan qiymati.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    max-width: 20rem;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-nomi">Manti</h3>
  <span class="narx">30 000 so'm</span>
</article>

2-mashq (o'rta): Bron formasidagi tugmalar

Bron formasining oxirida ikki tugma bor: "Tozalash" va "Stolni band qilish". Talablar:

1. Tugmalar o'ng chetda, orasida 0.75rem.
2. Tor ekranda sig'masa — keyingi qatorga o'ralsin, qatorlar orasida 0.5rem.
3. Tugmalar bir xil baland bo'lsin — birining matni ikki qatorga bo'linib ketsa ham.

<div>
  <button type="reset">Tozalash</button>
  <button type="submit">Stolni band qilish</button>
</div>

Ishora: 3-band uchun hech narsa yozish shart emas — qaysi sukut qiymat buni o'zi qiladi?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  form div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
  }
  button {
    font: inherit;
    padding: 0.5em 1.25em;
    border: 2px solid var(--rang-asosiy);
    border-radius: 8px;
  }
  button[type="submit"] {
    color: #fff;
    background-color: var(--rang-asosiy);
  }
</style>
<form action="https://example.com/bron" method="post">
  <div>
    <button type="reset">Tozalash</button>
    <button type="submit">Stolni band qilish</button>
  </div>
</form>

3-mashq (qiyin): Hisobla, keyin tekshir

Konteyner — display: flex; width: 600px; justify-content: space-around; gap: 20px;. Ichida uchta element: 100, 150 va 50 piksel.

1. Har elementning chap cheti konteyner chetidan necha pikselda boshlanadi? Avval qog'ozda hisoblang.
2. Natija blokida tekshiring (DevTools → element → box model yoki Computed).
3. space-around ni space-evenly ga almashtirsangiz, javob qanday o'zgaradi?

Ishora: gap avval joy egallaydi, justify-content esa qolgan joyni taqsimlaydi.

<style>
  div {
    display: flex;
    width: 600px;
    justify-content: space-around;
    gap: 20px;
    outline: 2px dashed #2f6b3a;
  }
  span {
    height: 40px;
    background-color: #d8ecd9;
  }
  span:nth-child(1) { width: 100px; }
  span:nth-child(2) { width: 150px; }
  span:nth-child(3) { width: 50px; }
</style>
<div><span></span><span></span><span></span></div>

4-mashq: Portfolio qadami — menyu oralig'i va o'rash

Flexbox'ga kirish darsida portfolio menyusi bir qatorga tushdi, lekin havolalar yopishib qoldi, katta shriftda esa siqilib ketdi.

1. Asosiy menyu havolalari orasiga yonma-yon 1rem, qatorlar orasiga 0.25rem joy bering.
2. Sig'maganda — keyingi qatorga o'ralsin.
3. Aloqa formasidagi radio variantlari (fieldset ichidagi p lar): tugma va yorlig'i o'rtadan tekislansin, orasida 0.5rem.
4. Telefon enida (360) va Large shriftda tekshiring: nechta qator chiqdi?

Ishora: 1–2-bandlar bitta qoidaga qo'shiladi. 3-band — fieldset p ni flex qiling; radio va yorliq — uning bolalari.

/* Asosiy menyu: havolalar bir qatorda, sig'masa o'raladi */
nav[aria-label="Asosiy menyu"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* Aloqa formasi: radio va yorlig'i bir chiziqda */
fieldset p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

<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;
  }
  header {
    inline-size: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  header nav a {
    color: var(--rang-asosiy);
    text-decoration: none;
  }
  nav[aria-label="Asosiy menyu"] [aria-current="page"] {
    color: var(--rang-matn);
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
  nav ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
  }
  nav[aria-label="Asosiy menyu"] ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
</style>
<header>
  <p><a href="./">Aziz Karimov</a></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./" aria-current="page">Bosh sahifa</a></li>
      <li><a href="haqimda/">Men haqimda</a></li>
      <li><a href="loyihalar/">Loyihalar</a></li>
      <li><a href="aloqa/">Aloqa</a></li>
    </ul>
  </nav>
</header>

11. Real ishda

• Har kuni ishlatiladigan juftlik — display: flex; align-items: center; gap: .... Tugma ichidagi belgi va matn, forma qatori, karta sarlavhasi — hammasi shu uch qator.
• "Chips" va teglar ro'yxati (Telegram'dagi papkalar, do'kondagi filtrlar) — flex-wrap: wrap + gap.
• Dizayndagi "Space between" — Figma'da Auto Layout sozlamasi aynan justify-content: space-between ga teng (Figma dasturchi uchun 2).
• Intervyuda so'raladi: "justify-content va align-items farqi?", "align-items va align-content farqi?", "space-around va space-evenly farqi?", "Nega flex'dagi rasm cho'zilib ketdi?".

Xulosa

• gap — faqat elementlar orasiga; ikki qiymatda avval row-gap, keyin column-gap.
• justify-content asosiy o'qdagi ortib qolgan joyni taqsimlaydi; bo'sh joy bo'lmasa — ta'sirsiz.
• align-items ko'ndalang o'qda tekislaydi, sukut stretch — rasmli qatorda uni o'chiring.
• flex-wrap: wrap keyingi qatorga o'raydi; har qator mustaqil tekislanadi.
• align-content — faqat wrap konteynerda qatorlar guruhini joylaydi.
• safe center toshgan kontentni yo'qotmaydi; yangi Baseline — zaxira bilan yozing.

Keyingi dars: flex-grow, flex-shrink, flex-basis va flex algoritmi — elementlar bo'sh joyga qanday cho'zilishi va joy yetmaganda qanday qisqarishini qog'ozda hisoblashni o'rganamiz.

Manbalar

• MDN: "Aligning items in a flex container", "justify-content", "align-items", "align-content", "flex-wrap", "gap" — developer.mozilla.org
• W3C: "CSS Box Alignment Module Level 3" (safe, start/flex-start) — w3.org/TR/css-align-3
• web-features (Baseline ma'lumotlari): "flexbox-gap", "flexbox" (safe_unsafe) — github.com/web-platform-dx/web-features