CSS Flexbox'ga kirish: konteyner, elementlar va ikki o'q

Qisqacha: Flexbox — elementlarni bitta o'q bo'ylab qator yoki ustun qilib teradigan CSS layout usuli. Otaga display: flex yozsangiz, u flex konteyner bo'ladi, uning bevosita bolalari esa flex elementlarga aylanadi va yonma-yon tiziladi. Hamma narsa ikki o'qqa bog'liq: elementlar tiziladigan asosiy o'q va unga tik turgan ko'ndalang o'q. Asosiy o'q yo'nalishini flex-direction belgilaydi: row (qator, sukut bo'yicha), column (ustun) va ularning teskarisi.

Bu darsda

• display: flex otaga yozilishini va faqat bevosita bolalarga ta'sir qilishini tushuntirasiz.
• Flex elementga aylangan span, matn va margin'larda nima o'zgarishini bilasiz.
• Asosiy va ko'ndalang o'qni istalgan flex-direction da ko'rsatib bera olasiz.
• flex va inline-flex farqini display ning ikki qismi orqali tushuntirasiz.
• DevTools'da flex konteynerni topib, uning chiziqlarini ko'rasiz.

Oldin bilishingiz kerak: display va elementni yashirish, Normal oqim va float, Margin sirlari, DevTools'da CSS.

1. Nega bu kerak?

CSS nima darsida va'da bergan edik: "Joylashuv — Flexbox darsidan boshlab". O'sha dars keldi.

«Bahor» saytining bosh sahifasida menyu bor: to'rtta havola, nav ichidagi ul da. Brauzer ro'yxatni ustma-ust teradi — har havola alohida qatorda, oldida nuqta. Jasur aka esa menyu sayt tepasida bir qator bo'lib turishini xohlaydi.

Nega ustma-ust? Chunki CSS hech narsa demasa, brauzer elementlarni normal oqim bilan teradi (Normal oqim darsidagi qoida): bloklar tepadan pastga, matn esa qator-qator. li — blok, shuning uchun har biri yangi qatordan boshlanadi.

Shu paytgacha bilgan yo'llarimiz noqulay edi. Masalan, display darsida inline-block elementlar orasida kutilmagan 4 piksellik bo'shliq chiqishini ko'rdik. float esa matnni rasm atrofida o'rash uchun yaratilgan. Butun sahifani u bilan terish — eski va mo'rt yo'l. Yana Jadval asoslari darsidagi qoidani eslang: sahifani ustunlarga bo'lish uchun jadval ishlatilmaydi, "ustunli joylashuvni Flexbox va Grid bilan quramiz". Flexbox menyu muammosini bitta qator bilan hal qiladi:

<style>
  section + section ul {
    display: flex;
  }
  li {
    margin-right: 1.5rem;
  }
</style>
<section>
  <h3>Oldin</h3>
  <ul>
    <li><a href="menyu/">Menyu</a></li>
    <li><a href="bron/">Bron</a></li>
    <li><a href="aloqa/">Aloqa</a></li>
    <li><a href="blog/">Blog</a></li>
  </ul>
</section>
<section>
  <h3>Keyin: bitta qator CSS</h3>
  <ul>
    <li><a href="menyu/">Menyu</a></li>
    <li><a href="bron/">Bron</a></li>
    <li><a href="aloqa/">Aloqa</a></li>
    <li><a href="blog/">Blog</a></li>
  </ul>
</section>

Nimaga qarang: ikkala ro'yxatning HTML'i bir xil. Ikkinchisida faqat ul ga display: flex yozildi — havolalar bir qatorga tizildi. Nuqtalar hali ham bor, ularni «Ko'p uchraydigan xatolar» bo'limida olib tashlaymiz. margin-right — hozircha oraliq uchun, keyingi darsda uning o'rniga maxsus xususiyat keladi.

Flexbox (Flexible Box Layout) — elementlarni bitta yo'nalish bo'ylab terish, tekislash va bo'sh joyni ular orasida taqsimlash usuli. "Flexible" — "egiluvchan": elementlar joyga qarab cho'zilishi va qisqarishi mumkin. Buni keyingi uch darsda bosqichma-bosqich ochamiz. Bugun — poydevor: kim konteyner, kim element va o'qlar qanday ishlaydi. Flexbox normal oqimni butun sahifada emas, faqat bitta konteyner ichida o'z qoidalari bilan almashtiradi.

2. Flex konteyner va flex elementlar

2.1 Ikki daraja: ota va uning bolalari

Flexbox ikki darajada ishlaydi:

• Flex konteyner (flex container) — display: flex yozilgan element. U "qanday terish kerak" degan qoidani saqlaydi.
• Flex element (flex item) — konteynerning bevosita bolalari. Ular o'sha qoida bo'yicha teriladi.

Margin sirlari darsidagi o'xshatishni davom ettiramiz: stollarni zalga qanday terishni zal egasi Jasur aka hal qiladi. Konteyner — zal va uning egasi. Flex elementlar — stollar. Stol ustidagi likopchalar esa (nabiralar) zalning qoidasiga bo'ysunmaydi — ular o'z stolida turadi.

Uch darajani sxemada ko'raylik:

flowchart TD
  A["ul — flex konteyner<br>display: flex"] --> B["li — flex element"]
  A --> C["li — flex element"]
  B --> D["p — nabira<br>flex qoidasi yetmaydi"]
  B --> E["p — nabira<br>flex qoidasi yetmaydi"]

Qoida faqat bir pog'ona pastga tushadi: ul → li. p larga u yetib bormaydi.

Buni tekshiramiz. Menyu kartasida har taom — li, uning ichida ikki paragraf:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  ul {
    display: flex;
    padding: 0;
    list-style: none;
    border: 2px dashed var(--rang-asosiy);
  }
  li {
    margin: 4px;
    padding: 0 12px;
    background-color: #d8ecd9;
  }
</style>
<ul>
  <li><p>Osh</p><p class="narx">35 000 so'm</p></li>
  <li><p>Lag'mon</p><p class="narx">28 000 so'm</p></li>
  <li><p>Manti</p><p class="narx">30 000 so'm</p></li>
</ul>

Nimaga qarang: uchta yashil li yonma-yon turibdi — ular flex elementlar. Har birining ichida taom nomi va narxi esa baribir ustma-ust. p lar ul ning bolasi emas, nabirasi. Ular uchun li oddiy blok bo'lib qoldi. Punktir ramka — konteyner chegarasi.

Nabiralarni ham yonma-yon terish kerak bo'lsa — ularning otasiga (li ga) ham display: flex yoziladi. Flex konteynerlar ichma-ich bo'lishi mumkin: bitta element bir vaqtda o'z otasi uchun flex element, o'z bolalari uchun esa flex konteyner bo'la oladi. Real sahifalarda shunday "matryoshka" juda ko'p.

Maslahat: Bolalarni guruhlash uchun ba'zan qo'shimcha o'rovchi kerak bo'ladi. article, section yoki div darsida "faqat CSS uchun guruhlaydigan blok — div" degan edik. Mana o'sha holat: ma'nosi yo'q, lekin layout uchun kerak bo'lgan o'ram — div. Teskari holat ham bor: o'rovchi xalaqit bersa, display darsidagi display: contents uning bolalarini konteynerga "qaytaradi" (ma'noli elementlarga emas — faqat div ga).

2.2 Flex element bo'lgach nima o'zgaradi

Konteyner ichiga tushgan bola o'z display qiymatini yo'qotadi. Brauzer uni blok ko'rinishga o'giradi — satr ichidagi span ham, a ham. Natijada display darsidagi "span ga width ishlamaydi" muammosi flex ichida yo'qoladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  p {
    display: flex;
    border: 2px dashed var(--rang-asosiy);
  }
  .narx {
    width: 8rem;
    margin-left: 1rem;
    color: var(--rang-urgu);
    background-color: #fbe3d6;
  }
</style>
<p>Osh <span class="narx">35 000 so'm</span></p>

Nimaga qarang: narx span i 8rem enli qizg'ish blokka aylandi — width ishladi. Chrome'da tekshirdik: DevTools → Computed'da span ning display qiymati endi block, eni aniq 128 piksel.

"Osh" so'zi ham flex element bo'ldi. Konteyner ichida teg bilan o'ralmagan matn — anonim flex element (anonymous flex item): brauzer uni ko'rinmas quti bilan o'raydi. Normal oqim darsidagi anonim qutilarni eslang — bu ham xuddi shunday quti. Unga selektor yozib bo'lmaydi. Matnni boshqarish kerak bo'lsa — uni span ga o'rang.

Yana ikki o'zgarish:

• Margin'lar qo'shilmaydi. Margin sirlari darsida aytgan edik: flex ichida margin'lar na bir-biri bilan, na ota bilan qo'shiladi. Chrome'da tekshirdik: ustun bo'lib terilgan ikki paragrafning har biri 16 piksel margin'ga ega — orada 32 piksel qoldi, normal oqimdagidek 16 emas.
• float va vertical-align ishlamaydi. Flex elementga float: right yozsangiz, u joyidan qimirlamaydi. Normal oqim darsidagi float — flex ichida befoyda.

Nega bunday? Flex konteyner o'z ichida yangi formatting context ochadi — o'z joylash qoidalari bor alohida "xona". Normal oqim darsidagi BFC kabi: ichkaridagi qoidalar tashqariga chiqmaydi, tashqaridagilar ichkariga kirmaydi. Faqat bu xonaning qoidalari boshqa — normal oqim emas, flex qoidalari.

Tekshirib ko'ring: <nav><ul><li><a>...</a></li></ul></nav> — havolalarni yonma-yon terish uchun display: flex ni qaysi elementga yozasiz: nav, ul, li yoki a ga?

2.3 flex va inline-flex

display darsida display ikki savolga javob berishini ko'rgan edik: tashqi tur — "qo'shnilarim bilan qanday turaman?", ichki tur — "bolalarimni qanday teraman?". Flexbox faqat ichki turni o'zgartiradi:

inline-flex kichik "yig'ma" elementlar uchun qulay — ichida belgi va matn bor tugma yoki yorliq. «Bahor» sahifasidagi "Stolni band qilish" havolasini (bron-havola) matn ichida qoldiramiz, lekin ichidagi belgi va so'zni tekis teramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  .bron-havola {
    display: inline-flex;
    padding: 4px 12px;
    color: #fff;
    background-color: var(--rang-asosiy);
    border-radius: 999px;
  }
  .bron-havola svg {
    margin-right: 6px;
  }
</style>
<p>
  Kechqurun joy tez to'ladi, oldindan band qiling:
  <a class="bron-havola" href="bron/">
    <svg width="16" height="16" viewBox="0 0 16 16"
      aria-hidden="true"><rect x="1" y="3" width="14" height="12"
      rx="2" fill="none" stroke="#fff" stroke-width="2"/></svg>
    Stolni band qilish
  </a>
</p>

Nimaga qarang: yashil havola gap ichida, so'zlar qatorida turibdi — tashqaridan inline. Ichkarida esa belgi va matn yonma-yon, bitta tekis qator bo'lib — ichkaridan flex. display: flex yozsangiz, havola gapni uzib, o'z qatoriga tushadi va butun enni oladi. "Tahrirlab ko'rish" bilan sinab ko'ring.

Belgi — aria-hidden="true" li bezak SVG (Accessibility daraxti): ekran o'quvchi faqat "Stolni band qilish" ni o'qiydi.

3. Ikki o'q

3.1 Asosiy o'q va ko'ndalang o'q

Flexbox'ni tushunishning kaliti — ikki o'q. Shashlik sixini tasavvur qiling: go'sht bo'laklari sixga bir qator qilib tiziladi. Six yo'nalishi — asosiy o'q (main axis). Unga tik — bo'lakning "balandligi" tomoni — ko'ndalang o'q (cross axis).

• Asosiy o'q — flex elementlar shu yo'nalishda ketma-ket tiziladi. U boshlanadigan chet — main-start, tugaydigan chet — main-end.
• Ko'ndalang o'q — asosiy o'qqa tik yo'nalish. Uning chetlari — cross-start va cross-end.

Sukut bo'yicha asosiy o'q gorizontal — chapdan o'ngga, ko'ndalang o'q esa tepadan pastga:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: flex;
    padding: 8px;
    border: 2px dashed var(--rang-asosiy);
  }
  .taom-karta > p {
    margin: 0 8px 0 0;
    padding: 8px 12px;
    background-color: #d8ecd9;
  }
  .taom-karta > p:last-child {
    padding-bottom: 40px;
  }
  small {
    display: block;
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<small>asosiy o'q: main-start → → → main-end</small>
<div class="taom-karta">
  <p>1. Osh</p>
  <p>2. Lag'mon</p>
  <p>3. Manti<br>(ko'ndalang o'q ↓)</p>
</div>

Nimaga qarang: elementlar 1, 2, 3 tartibida chapdan o'ngga tizildi — asosiy o'q bo'ylab. Uchinchi element eng baland. Birinchi ikkitasi esa uning bo'yigacha cho'zildi — ko'ndalang o'q bo'ylab. Bu cho'zilishni «Sukut xulqi» bo'limida ochamiz.

3.2 Nega "gorizontal" emas, "asosiy"?

Chunki asosiy o'q har doim ham gorizontal emas. Uni flex-direction buradi — buni shu darsning o'zida ko'ramiz. Bundan tashqari, sukut bo'yicha "qator" yo'nalishi — matn yo'nalishi. Mantiqiy xususiyatlar darsidagi dir="rtl" sahifada (arabcha matn) qator o'ngdan chapga yuradi. Chrome'da tekshirdik: dir="rtl" li konteynerda birinchi element o'ng chetda turdi, ikkinchisi — uning chapida.

Shuning uchun Flexbox'ning hamma xususiyati "chap", "o'ng", "tepa" demaydi. U "asosiy o'q bo'yicha" va "ko'ndalang o'q bo'yicha" deydi. Keyingi darsdagi ikki eng muhim xususiyat — justify-content va align-items — aynan shu ikki o'qqa bo'lingan.

Tekshirib ko'ring: Oddiy o'zbekcha sahifada display: flex yozilgan konteynerning asosiy o'qi qaysi yo'nalishda va main-start qaysi chetda?

4. flex-direction — asosiy o'qni burish

4.1 To'rt qiymat

flex-direction — asosiy o'qning yo'nalishini belgilaydigan xususiyat. U konteynerga yoziladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    display: flex;
    margin-bottom: 12px;
    padding: 4px;
    border: 2px dashed var(--rang-asosiy);
  }
  span {
    margin: 2px;
    padding: 4px 10px;
    background-color: #d8ecd9;
  }
  code {
    display: block;
    font-weight: bold;
  }
</style>
<code>row</code>
<div><span>1</span><span>2</span><span>3</span></div>
<code>row-reverse</code>
<div style="flex-direction: row-reverse">
  <span>1</span><span>2</span><span>3</span>
</div>
<code>column</code>
<div style="flex-direction: column">
  <span>1</span><span>2</span><span>3</span>
</div>
<code>column-reverse</code>
<div style="flex-direction: column-reverse">
  <span>1</span><span>2</span><span>3</span>
</div>

Nimaga qarang: row-reverse da 1 o'ng chetda, elementlar o'ngdan boshlab tizilgan. column da ular ustma-ust, column-reverse da esa 3 eng tepada. Yana bir narsa: column konteynerlarda yashil bloklar butun enga cho'zildi. Qatordagilar esa o'z matnicha. Sababi — ko'ndalang o'q endi gorizontal va elementlar shu o'q bo'ylab cho'ziladi. Namunada style atributi faqat qisqalik uchun — o'z loyihangizda buni asosiy.css ga yozasiz (CSS nima).

4.2 column — ustun: bron formasi

Ustun kerak bo'lsa, oddiy bloklar ham ustma-ust turadi-ku — nima uchun column? Farq ko'ndalang o'qda. column konteynerda bolalar gorizontal cho'ziladi — input ham. display darsidagi bron formasini olamiz: har maydon guruhi div ichida:

<style>
  :root {
    --rang-ikkinchi: #5b6660;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  form {
    max-width: 22rem;
  }
  form > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  label {
    font-weight: bold;
  }
  span[id$="-yordam"] {
    font-size: 0.875rem;
    color: var(--rang-ikkinchi);
  }
  input {
    font: inherit;
    padding: 0.5em;
  }
</style>
<form action="https://example.com/bron" method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" autocomplete="name">
  </div>
  <div>
    <label for="telefon">Telefon raqamingiz</label>
    <span id="telefon-yordam">Masalan: +998 90 000 00 00.</span>
    <input id="telefon" name="telefon" type="tel"
           autocomplete="tel" required
           aria-describedby="telefon-yordam">
  </div>
</form>

Nimaga qarang: yorliq, yordam matni va maydon — har biri o'z qatorida. Biz display: block ham, width: 100% ham yozmadik. Maydonlar esa forma enini to'liq egalladi. Chrome'da o'lchadik: forma 352 piksel (22rem), ikkala input ham 352 piksel. Ustunning ko'ndalang o'qi gorizontal — bolalar o'sha tomonga cho'zildi.

Bu CSS nima darsidagi "forma maydonlarini tartib bilan terish" va'dasining birinchi qadami. Keyingi darslarda bunga oraliqlar va "maydon + tugma" guruhi qo'shiladi.

4.3 Teskari yo'nalish — faqat ko'rinish

row-reverse va column-reverse HTML tartibini o'zgartirmaydi — faqat ekranda teskari chizadi. Ekran o'quvchi va Tab tugmasi esa kod tartibida yuradi. Qulay forma darsida ogohlantirgan edik: "ko'z bir tartibda o'qiydi, Tab boshqasida yuradi". Bu tuzoqni align-self, order va auto margin darsida Chrome'da Tab bilan tekshirib ko'ramiz. Hozircha qoida: teskari yo'nalishni faqat ma'noga ta'sir qilmaydigan bezak uchun ishlating.

Tekshirib ko'ring: flex-direction: column da asosiy o'q qaysi yo'nalishda? Ko'ndalang o'q-chi?

5. Sukut xulqi: hech narsa yozmasangiz

Otaga faqat display: flex yozdingiz, boshqa hech narsa. Brauzer to'rtta ish qiladi:

1. Elementlar asosiy o'q boshidan tiziladi — main-start tomonga yig'iladi, qolgan joy oxirida bo'sh qoladi.
2. Eni — mazmunicha. Oddiy blok otasining butun enini oladi. Flex element esa qatorda o'z mazmuni kengligicha bo'ladi.
3. Ko'ndalang o'q bo'ylab cho'ziladi. Qatordagi hamma elementlar eng baland element bo'yiga tenglashadi.
4. Bitta qatorga siqiladi. Joy yetmasa, elementlar keyingi qatorga o'tmaydi — torayadi, keyin konteynerdan chiqib ketadi.

3-band — O'lchamlar darsidagi va'da: "ikki ustunli kartalarni bir xil bo'yli qilish". Foizsiz, height siz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    display: flex;
  }
  .taom-karta {
    margin-right: 12px;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
    border-radius: 8px;
  }
</style>
<section>
  <article class="taom-karta">
    <h3 class="taom-nomi">Osh</h3>
    <p>35 000 so'm</p>
  </article>
  <article class="taom-karta">
    <h3 class="taom-nomi">Lag'mon</h3>
    <p>Qo'lda cho'zilgan xamir, mol go'shti va sabzavot.
    Achchiqligini o'zingiz tanlaysiz.</p>
    <p>28 000 so'm</p>
  </article>
</section>

Nimaga qarang: osh kartasida matn kam, lekin u lag'mon kartasi bilan bir xil baland — ramkalarning pastki cheti bir chiziqda. Chrome'da o'lchadik: ikkala karta ham bir xil bo'yda. Osh kartasining pastida bo'sh joy qoldi — bu cho'zilish.

4-band keyingi darsning mavzusi: elementlarni keyingi qatorga "o'rash" va ular orasiga oraliq qo'yish. Kengayish va torayish qoidalarini esa flex-grow, flex-shrink va flex-basis darsida hisoblab ko'ramiz.

6. DevTools'da flex

DevTools'da CSS darsida flex vositalarini faqat tanishtirgan edik. Endi ishlatamiz:

• flex belgisi. Elements panelida display: flex li element yonida kichik flex yozuvi chiqadi. Uni bossangiz, sahifada konteyner chegarasi, elementlar va ular orasidagi bo'sh joy chiziladi.
• Flexbox editor. Styles'da display: flex yonidagi kichik ikonkani bosing. Oynada flex-direction va keyingi darsdagi tekislash qiymatlari rasm-tugmalar bilan chiqadi — bosib sinab ko'rasiz.
• Layout yorlig'i. Sahifadagi hamma flex konteynerlar ro'yxati — belgilab, overlay'ni yoqasiz.

Yuqoridagi natijalardan birini "Tahrirlab ko'rish" bilan oching, keyin sichqonchaning o'ng tugmasi → Inspect. flex belgisini bosib, qaysi element konteyner ekanini ko'ring.

7. Ko'p uchraydigan xatolar

7.1 display: flex bolaga yozilgan

li { display: flex; } — menyu baribir ustma-ust. Yonma-yon turishi kerak bo'lgan elementlarning otasiga yozing: ul { display: flex; }. Qoida: "kimlarni tizaman?" — ularning otasi konteyner bo'ladi.

7.2 Nabira ham yonma-yon bo'lishini kutish

section { display: flex; } — ichidagi article lar yonma-yon, lekin article ichidagi sarlavha va narx ustma-ust qoldi. Flex faqat bevosita bolalarga ta'sir qiladi. Tuzatish: ichki guruhga ham alohida display: flex.

7.3 Ro'yxat nuqtalari qoldi

ul ni flex qildingiz, havolalar yonma-yon, lekin har birining oldida nuqta. Chrome'da tekshirdik: flex ichidagi li ham ro'yxat elementi bo'lib qoladi va belgisini chizadi. Tuzatish: Ro'yxatlar va jadvallar stili darsidagi list-style: none va padding-left: 0. O'sha darsdagi Safari tuzog'ini ham eslang: menyu nav ichida bo'lsa, ro'yxat ma'nosi saqlanadi.

7.4 float yoki vertical-align bilan tekislash

Flex elementga float: right yoki vertical-align: middle — hech narsa bo'lmaydi. DevTools ularni xira qilib ko'rsatadi. Tuzatish: flex ichida tekislash — flex xususiyatlari bilan (keyingi dars).

7.5 column da "gorizontal" deb o'ylash

flex-direction: column yozildi, lekin dasturchi hali ham "asosiy o'q — gorizontal" deb hisoblaydi. Keyingi darsdagi tekislash xususiyatlari "noto'g'ri" ishlayotgandek tuyuladi. Tuzatish: har safar avval so'rang: "asosiy o'q qayerga qarayapti?" — DevTools overlay'i buni ko'rsatadi.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Footer'da uch ma'lumot

«Bahor» saytining pastida uchta paragraf bor:

<footer>
  <p>Toshkent, Bahor ko'chasi</p>
  <p>+998 90 000 00 00</p>
  <p>Har kuni 7:00–23:00</p>
</footer>

1. Uchalasini bitta qatorga tering.
2. Paragraflar orasiga margin-right: 2rem bilan joy qo'ying.
3. DevTools'da paragrafning tepa va pastki margin'larini tekshiring. footer bo'yi normal oqimdagiga qaraganda o'zgardimi? Nega?

Ishora: 3-band — «Flex element bo'lgach nima o'zgaradi» bo'limidagi "margin'lar qo'shilmaydi" qoidasi va Margin sirlari darsidagi "margin ota chegarasidan chiqib ketishi".

<style>
  :root {
    --rang-ikkinchi: #5b6660;
  }
  footer {
    display: flex;
    color: var(--rang-ikkinchi);
    border-top: 1px solid currentColor;
  }
  footer p {
    margin-right: 2rem;
  }
</style>
<footer>
  <p>Toshkent, Bahor ko'chasi</p>
  <p>+998 90 000 00 00</p>
  <p>Har kuni 7:00–23:00</p>
</footer>

2-mashq (o'rta): Menyu kartasi — nom va narx yonma-yon

Taom kartasida nom va narx ustma-ust turibdi. Ularni bitta qatorga, karta ichida qo'ying. Kartalarning o'zi esa ustma-ust qolsin.

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

Ishora: yonma-yon turishi kerak bo'lganlar — taom-nomi va narx. Ularning otasi kim?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: flex;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
  .taom-nomi {
    margin-right: 1rem;
  }
  .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>
<article class="taom-karta">
  <h3 class="taom-nomi">Osh</h3>
  <span class="narx">35 000 so'm</span>
</article>

3-mashq (qiyin): O'rovchi tuzog'i

Stajyor menyu sahifasida kartalarni yonma-yon qilmoqchi. HTML'ni boshqa dasturchi yozgan va har karta bezak uchun div ga o'ralgan:

<section>
  <h2>Bugungi taomlar</h2>
  <div>
    <article class="taom-karta">Osh</article>
    <article class="taom-karta">Lag'mon</article>
    <article class="taom-karta">Manti</article>
  </div>
</section>

Stajyor section { display: flex; } yozdi. Natija kutilganidek emas.

1. Ekranda nima bo'ladi? Taxmin qiling, keyin tekshiring.
2. HTML'ga tegmasdan kartalarni yonma-yon qiling, sarlavha esa ularning ustida qolsin.
3. Yana bir yechim bor: div ni "yo'q qilish". Nima uchun bu yerda u ham ishlaydi, lekin ul bo'lganida ishlatmaslik kerak?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section > div {
    display: flex;
  }
  .taom-karta {
    margin-right: 8px;
    padding: 12px 16px;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<section>
  <h2>Bugungi taomlar</h2>
  <div>
    <article class="taom-karta">Osh</article>
    <article class="taom-karta">Lag'mon</article>
    <article class="taom-karta">Manti</article>
  </div>
</section>

4-mashq: Portfolio qadami — menyu bir qatorda

Portfoliongizning asosiy menyusi hali ham ustma-ust ro'yxat. O'lchamlar darsida uni "yonma-yon terish uchun Flexbox kerak" deb qoldirgan edik. Nuqtalar va chap bo'shliq esa Ro'yxatlar stili darsidan beri yo'q — nav ul, nav ol qoidasi ularni olib tashlagan.

1. Asosiy menyu havolalarini bir qatorga tering. Selektor — Atribut selektorlari darsidagi nav[aria-label="Asosiy menyu"], class qo'shmang.
2. asosiy.css da nav ul, nav ol qoidasi borligini tekshiring. Yo'q bo'lsa — «Ro'yxat nuqtalari qoldi» xatosidagi ikki qatorni qo'shing.
3. DevTools'da ul yonidagi flex belgisini bosing. Telefon enida (360 piksel) havolalar sig'adimi? Ular orasida joy bormi?
4. Non yo'li (nav[aria-label="Non yo'li"]) o'zgarmaganini tekshiring.

Ishora: konteyner — li larning otasi.

/* Asosiy menyu: havolalar bir qatorda */
nav[aria-label="Asosiy menyu"] ul {
  display: flex;
}

<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;
  }
</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>

9. Real ishda

• Deyarli har bir sahifada. Menyu, tugma ichidagi belgi va matn, karta ichidagi sarlavha va narx, forma qatori — bularning ko'pi Flexbox. Istalgan saytni DevTools'da oching va Elements'da flex belgilarini sanang.
• Figma'dagi Auto Layout — aslida Flexbox. Dizayner "Auto Layout, vertical" desa, siz display: flex; flex-direction: column eshitasiz. Bu bog'lanishni Figma dasturchi uchun 2 darsida ko'rasiz.
• Tailwind kabi vositalarda flex, flex-col, inline-flex — aynan shu xususiyatlarning qisqa nomlari. Tailwind'ni kursda keyinroq o'rganamiz, hozir bilish shart emas.
• Intervyuda so'raladi: "Flex konteyner va flex element farqi?", "Main axis va cross axis nima?", "flex-direction: column da o'qlar qanday o'zgaradi?", "flex va inline-flex farqi?".

Xulosa

• display: flex otaga yoziladi; flex element — faqat bevosita bolalar, nabiralar emas.
• Flex element blok ko'rinishga o'tadi: span ga width ishlaydi, margin'lar qo'shilmaydi, float ishlamaydi.
• Asosiy o'q — elementlar tiziladigan yo'nalish, ko'ndalang o'q — unga tik.
• flex-direction: row (sukut), row-reverse, column, column-reverse. Teskari yo'nalish — faqat ko'rinish.
• Sukut xulqi: boshdan tiziladi, eni mazmunicha, ko'ndalang o'qda cho'ziladi, bitta qatorga siqiladi.
• inline-flex — tashqaridan satr ichidagi element, ichkaridan flex.

Keyingi dars: Flex'da tekislash, o'rash va gap — elementlarni ikki o'q bo'ylab tekislash, keyingi qatorga o'rash va margin'siz oraliq qo'yishni o'rganamiz.

Manbalar

• MDN: "Basic concepts of flexbox", "display", "flex-direction" — developer.mozilla.org
• W3C: "CSS Flexible Box Layout Module Level 1" — w3.org/TR/css-flexbox-1
• Chrome for Developers: "Inspect and debug CSS flexbox" — developer.chrome.com/docs/devtools
• web-features (Baseline ma'lumotlari): "flexbox" — github.com/web-platform-dx/web-features