CSS Flexbox naqshlari: navbar, sticky footer va div'ni markazlashning barcha usullari

Qisqacha: Real sahifalar bir necha takrorlanadigan flex "retsept"idan yig'iladi. Navbar: display: flex; justify-content: space-between; align-items: center — logotip chapda, menyu o'ngda. Sticky footer: body { display: flex; flex-direction: column; min-height: 100dvh; } va main { flex: 1; } — sahifa qisqa bo'lsa ham footer ekran pastida. Maydon + tugma: maydonga flex: 1; min-width: 0, tugmaga flex: none. Blokni ikki o'qda markazlash uchun eng qisqa yo'llar — display: flex + justify-content: center + align-items: center yoki display: grid; place-items: center.

Bu darsda

• Navbar, media object, sticky footer va "maydon + tugma" naqshlarini yozasiz va har qatorini tushuntirasiz.
• Menyu havolalarini barmoq uchun kamida 24×24 pikselga yetkazasiz va buni o'lchab tekshirasiz.
• Blokni markazlashning yetti usulini bilasiz va vaziyatga qarab to'g'risini tanlaysiz.
• Portfoliongiz sarlavhasini haqiqiy navbar'ga, footer'ini esa sahifa pastiga yopishadiganga aylantirasiz.

Oldin bilishingiz kerak: align-self, order va auto margin, position va containing block, Viewport birliklari, O'lchamlar.

1. Nega bu kerak?

To'rt darsda Flexbox'ning hamma xususiyatini o'rgandingiz. Endi ularni birga ishlatamiz. Real saytlarni ochib ko'rsangiz, bir xil tuzilmalar qayta-qayta chiqadi: tepada sarlavha va menyu, rasm yonida matn, pastda footer, qidiruv maydoni yonida tugma. Ularning har biri uchun tajribali dasturchilar bir xil kod yozadi.

Naqsh (pattern) — takror uchraydigan muammoning sinalgan, tayyor yechimi. Oshpaz Rustam aka har safar oshni noldan o'ylab topmaydi — uning sinalgan retsepti bor. Bu dars — flex retseptlari to'plami.

Ikkinchi yarmi — intervyularning eng mashhur savoli: "Blokni o'rtaga qanday qo'yasiz?". Gorizontal markazlashni Margin sirlari darsida ko'rgan edik, vertikalini esa "flex va grid darslaridan keyin" deb qoldirgan edik. Yana Qator balandligi darsida vertical-align: middle blokni markazlamasligini ko'rdik. Bugun hamma usullarni bitta joyga yig'amiz.

2. Navbar: logotip chapda, menyu o'ngda

2.1 Asosiy retsept

Navbar (navigation bar) — sahifa tepasidagi sarlavha qatori: logotip yoki sayt nomi, menyu, ba'zan tugma. «Bahor» sarlavhasi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background-color: var(--rang-fon);
  }
  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid var(--rang-asosiy);
  }
  header > p {
    margin: 0;
    font-weight: bold;
    color: var(--rang-asosiy);
  }
  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav a {
    display: block;
    padding: 0.25rem 0.5rem;
    color: var(--rang-asosiy);
  }
</style>
<header>
  <p>Choyxona «Bahor»</p>
  <nav aria-label="Asosiy menyu">
    <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>
  </nav>
</header>

Nimaga qarang: kompyuterda nom chapda, menyu o'ng chetda, ikkalasi bitta chiziqda. Har qatorning vazifasi:

• header { display: flex; } — ikki bola (nom va nav) yonma-yon.
• justify-content: space-between — bo'sh joy ular orasiga: biri chapga, biri o'ngga (Flex'da tekislash).
• align-items: center — nom va menyu balandligi har xil, lekin o'rtalari bir chiziqda.
• flex-wrap: wrap — tor ekranda menyu nom ostiga tushadi. Telefon tugmasini bosing: menyu ikkinchi qatorda, chapda. space-between qatorda yolg'iz qolgan elementni boshga qo'yadi.
• gap: 0.5rem 1rem — o'ralganda qatorlar orasi, yonma-yonda nom va menyu orasi.
• nav ul — ichki flex: havolalar yonma-yon (Flexbox'ga kirish).

2.2 space-between yoki margin-left: auto?

Ikkala usul ham menyuni o'ngga suradi. Farqi — elementlar soni:

• Ikki guruh (nom va menyu) — justify-content: space-between. Qisqa va aniq.
• Ko'p element, bittasi o'ngda (nom, menyu, "Stolni band qilish" tugmasi) — o'ngdagi birinchi elementga margin-left: auto (Auto margin). space-between uch element orasiga teng bo'lib, menyuni o'rtaga qo'yib qo'yardi.

2.3 Barmoq uchun joy

O'lchamlar darsidagi auditni eslang: menyu havolalari 21 piksel baland edi — WCAG 2.5.8 talab qiladigan 24×24 dan kichik. Havola — satr ichidagi element, uning bo'yi faqat harflar balandligi.

Yuqoridagi navbar'da havolalarga ikki narsa berildi: display: block (endi havola "quti", padding uning o'lchamiga qo'shiladi) va padding: 0.25rem 0.5rem. Chrome'da o'lchadik: "Menyu" havolasi endi 29 piksel baland (21 — matn qatori, va 4 + 4 padding) — 24 dan katta. Eni esa 65 piksel. Butun padding maydoni bosiladi: barmoq harfga emas, qutiga tegsa yetarli.

Qo'shni havolalar orasidagi gap ham muhim: ikki bosiladigan quti bir-biriga yopishmasin. 44×44 — AAA darajadagi maqsad (O'lchamlar); uni 2.5.5 mezoni bo'yicha asosiy tugmalar uchun saqlang.

To'liq mobil menyu — "gamburger" tugmasi bilan ochiladigan — JavaScript va boshqa vositalarni talab qiladi. Uni Navbar va mobil menyu darsida quramiz.

3. Media object: rasm chapda, matn o'ngda

Media object — chapda rasm (avatar, belgi, mahsulot rasmi), o'ngda matn. Izohlar, xabarlar, mahsulot ro'yxatlari — hammasi shu naqsh. «Bahor» menyusidagi taom qatori:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    max-width: 36rem;
    padding: 1rem;
    border: 2px solid var(--rang-asosiy);
    border-radius: 8px;
  }
  .taom-karta svg {
    flex: none;
  }
  .taom-karta > div {
    flex: 1 1 14rem;
    min-width: 0;
  }
  .taom-karta h3,
  .taom-karta p {
    margin: 0 0 0.5rem;
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
    <rect width="96" height="96" rx="12" fill="#2f6b3a"/>
    <circle cx="48" cy="52" r="26" fill="#f2c14e"/></svg>
  <div>
    <h3 class="taom-nomi">Osh</h3>
    <p>Toshkent usulida: devzira guruch, sariq sabzi, mol go'shti
    va bedana tuxumi. Har kuni 12:00 dan.</p>
    <p class="narx">35 000 so'm</p>
  </div>
</article>

Nimaga qarang: kompyuterda rasm chapda, matn o'ngda; telefonda matn rasm ostiga tushdi. Retsept to'rt qatordan iborat:

• Rasmga flex: none — u qisqarmaydi va cho'zilmaydi (flex-shrink).
• Konteynerga align-items: flex-start — rasm matn bo'yiga cho'zilmaydi (Flex'da tekislash).
• Matnga flex: 1 1 14rem — qolgan joyni oladi, lekin 14rem dan torroq joyda keyingi qatorga o'raladi. Media query yo'q.
• Matnga min-width: 0 — ichida uzun so'z yoki "…" bo'lsa, u qisqara oladi (Auto margin va min-width: 0).

Rasm o'ngda kerak bo'lsa — HTML'da uni matndan keyin yozing. row-reverse bu yerda ham ishlaydi, lekin rasm bosiladigan havola bo'lsa, Tab tartibi buziladi.

4. Sticky footer: footer doim pastda

4.1 Muammo

Portfolio'dagi "Aloqa" yoki 404 sahifasi qisqa. Kompyuter ekranida footer sahifaning o'rtasida "osilib" turadi, ostida bo'sh joy. Chiroyli emas. Kerakli xulq: mazmun kam bo'lsa — footer ekran pastida; mazmun ko'p bo'lsa — normal oqimdagidek mazmundan keyin.

Bu naqshning nomi — sticky footer ("yopishqoq footer"): footer ekran pastiga yopishib turadi. Nomi position: sticky ga o'xshaydi, lekin ular bog'liq emas — bu yerda position umuman ishlatilmaydi, faqat flex.

4.2 Retsept

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: system-ui, sans-serif;
    background-color: var(--rang-fon);
  }
  header,
  footer {
    padding: 0.5rem 1rem;
    color: #fff;
    background-color: var(--rang-asosiy);
  }
  main {
    flex: 1;
    padding: 0 1rem;
  }
</style>
<header>Choyxona «Bahor»</header>
<main>
  <h1>Aloqa</h1>
  <p>Telefon: +998 90 000 00 00</p>
</main>
<footer>Har kuni 7:00–23:00</footer>

Nimaga qarang: mazmun ikki qator, lekin yashil footer oynaning eng pastida. Bu natija oynasi 400 piksel baland (unda dvh bor — sayt bunday oynani qat'iy balandlikda ochadi). Chrome'da o'lchadik: body roppa-rosa 400, footer uning pastiga yopishgan, skroll yo'q.

Qatorma-qator:

• display: flex; flex-direction: column — body ustun: header, main, footer ustma-ust.
• min-height: 100dvh — body kamida ekran bo'yicha. Qisqa sahifada ham bo'sh joy paydo bo'ladi. Oldingi qator — 100vh — eski brauzerlar uchun zaxira (Viewport birliklari).
• main { flex: 1; } — o'sha bo'sh joyning hammasini main oladi va footer'ni pastga itaradi.
• margin: 0 — muhim! Brauzer body ga 8 piksel margin beradi. min-height: 100dvh + 16 piksel margin = ekrandan 16 piksel baland sahifa va keraksiz skroll. Chrome'da tekshirdik: margin: 0 siz sahifa 416 piksel bo'lib, skroll paydo bo'ldi.

Nega dvh? Viewport birliklari darsida dvh panel yashirinib-ko'ringanda "sakrashi"ni ko'rgan edik. Bu yerda u zarar qilmaydi: min-height faqat mazmun ekrandan qisqa bo'lganda ishlaydi. Unday sahifani aylantirib bo'lmaydi, panel ham joyidan qimirlamaydi. Mazmun uzun bo'lsa, body mazmun bo'yida va dvh umuman ta'sir qilmaydi. Natijada footer doim ko'rinadigan ekranning roppa-rosa pastida.

main { flex: 1; } o'rniga footer { margin-top: auto; } ham ishlaydi — Auto margin darsidagi "pastga itarish". Farq: flex: 1 da main ning o'zi cho'ziladi (fon yoki ramka bo'lsa, butun joyni to'ldiradi), margin-top: auto da esa bo'sh joy main va footer orasida qoladi.

Xuddi shu naqshni grid bilan uch qatorlik to'r sifatida ham yozish mumkin — grid-template-areas darsida.

Tekshirib ko'ring: Sticky footer tayyor, lekin telefonda sahifa qisqa bo'lsa ham 16 piksel aylanadi. Nima unutilgan?

5. Maydon + tugma guruhi

5.1 Qidiruv qatori

Sahifa landmarklari darsida «Bahor» menyusiga qidiruv formasini qo'shgan edik: maydon va "Qidirish" tugmasi. Ular bitta qatorda, maydon esa qolgan butun joyni egallashi kerak. Yorliq — ko'rinadigan, tepada (label darsidagi birinchi variant):

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  search form {
    display: flex;
    flex-wrap: wrap;
    max-width: 30rem;
  }
  search label {
    flex-basis: 100%;
    margin-bottom: 0.25rem;
    font-weight: bold;
  }
  search input {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 0.5em;
    border: 2px solid var(--rang-asosiy);
    border-radius: 8px 0 0 8px;
  }
  search button {
    flex: none;
    font: inherit;
    padding: 0.5em 1em;
    color: #fff;
    background-color: var(--rang-asosiy);
    border: 2px solid var(--rang-asosiy);
    border-radius: 0 8px 8px 0;
  }
</style>
<search>
  <form action="https://example.com/menyu/">
    <label for="menyu-qidiruv">Menyudan qidirish</label>
    <input type="search" id="menyu-qidiruv" name="q">
    <button type="submit">Qidirish</button>
  </form>
</search>

Nimaga qarang: maydon va tugma bitta "kapsula" bo'lib turibdi — tashqi burchaklar yumaloq, ichkilari to'g'ri. Telefonda ham tugma joyida, maydon torroq bo'ldi.

Uchta flex qarori:

• label { flex-basis: 100%; } — yorliq butun qatorni egalladi. Qatorda boshqa joy qolmadi, flex-wrap: wrap maydon va tugmani keyingi qatorga o'tkazdi. Bu flex ichida "qator uzish"ning sodda usuli.
• input { flex: 1; min-width: 0; } — maydon qolgan joyni oladi. min-width: 0 ga e'tibor bering: maydonning o'z "tabiiy" eni bor. Chrome'da o'lchadik: bu shriftda u 202 piksel, 200 piksellik formada esa tugma bilan birga chetdan 70 piksel chiqib ketdi. min-width: 0 bilan maydon 132 pikselga qisqardi va hammasi sig'di.
• button { flex: none; } — tugma hech qachon qisilmaydi, "Qidirish" so'zi ikkiga bo'linmaydi.

Tugma balandligi maydon bilan bir xil — Flex'da tekislash darsidagi sukut stretch.

5.2 Fokus halqasi

Maydon va tugma bir-biriga yopishgan, shuning uchun fokus halqasi (outline) qo'shni elementning ostida qolishi mumkin. Holat pseudo-klasslari darsidagi :focus-visible qoidangiz outline-offset bilan ishlasa, halqa elementdan tashqarida chiziladi va qo'shnisi uni qisman yopadi. Klaviatura bilan tekshiring: Tab bilan maydonga, keyin tugmaga o'ting — halqa har birida to'liq ko'rinsin. Ko'rinmasa, fokusdagi elementga position: relative va z-index: 1 bering (z-index) — u qo'shnisining ustiga chiqadi.

6. Markazlashning barcha usullari

6.1 Yetti usul bitta joyda

"Blokni o'rtaga qo'yish" — bitta vazifa emas, bir nechta. Gorizontalmi yoki ikkala o'qdami? Blokning o'lchami ma'lummi? U oqimda turadimi yoki boshqa narsaning ustida "suzadimi"? Har savolga o'z usuli bor. Hammasini bir natijada ko'ramiz — har qutida "Osh" belgisi o'rtada:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  section {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  section > div {
    position: relative;
    width: 180px;
    height: 110px;
    outline: 2px dashed var(--rang-asosiy);
  }
  section > div > b {
    width: 64px;
    padding: 4px 0;
    text-align: center;
    color: #fff;
    background-color: var(--rang-asosiy);
  }
  small {
    position: absolute;
    left: 4px;
    bottom: 2px;
  }
</style>
<section>
  <div style="display: flex;
    justify-content: center; align-items: center">
    <b>Osh</b><small>1. flex</small></div>
  <div style="display: flex">
    <b style="margin: auto">Osh</b><small>2. flex + auto</small></div>
  <div style="display: grid; place-items: center">
    <b>Osh</b><small>3. grid</small></div>
  <div>
    <b style="display: block; margin: 42px auto 0">Osh</b>
    <small>4. margin-inline</small></div>
  <div>
    <b style="position: absolute; inset: 0; height: 26px;
      margin: auto">Osh</b><small>5. inset + auto</small></div>
  <div>
    <b style="position: absolute; top: 50%; left: 50%;
      translate: -50% -50%">Osh</b><small>6. translate</small></div>
  <div style="display: block; align-content: center;
    text-align: center">
    <b style="display: inline-block">Osh</b>
    <small>7. align-content</small></div>
</section>

Nimaga qarang: yettita qutining hammasida yashil belgi aynan o'rtada. Chrome'da o'lchadik: yettala belgining markazi qutining markaziga aniq tushdi — farq 0 piksel. Faqat 4-quti "aldayapti": vertikal markaz qo'lda hisoblangan 42px bilan olingan — (110 − 26) ÷ 2. style atributlari — faqat shu solishtirish uchun (CSS nima).

6.2 Har usul qachon

1. Flex: justify-content + align-items. Eng ko'p ishlatiladigani. Otaga yoziladi, bolaning o'lchami noma'lum bo'lsa ham ishlaydi. Bir nechta bola bo'lsa — ular guruh bo'lib o'rtaga tushadi.

2. Flex + margin: auto. Otaga faqat display: flex, bolaga margin: auto — auto margin'lar ikkala o'qdagi bo'sh joyni teng bo'lib oladi (Auto margin). Qo'shimcha afzalligi: bola otadan katta bo'lsa, u chapga toshmaydi — Flex'da tekislash darsidagi safe center kabi xulq, yangi kalit so'zsiz.

3. Grid: place-items: center. Grid — ikki o'lchamli layout usuli: elementlarni ham qator, ham ustun bo'ylab to'rga teradi. Uni Grid'ga kirish darsidan boshlab o'rganamiz; hozir faqat shu ikki qatorni bilish yetarli. place-items — ikki o'qdagi tekislashning qisqa yozuvi. Eng qisqa yozuv: display: grid; place-items: center;.

4. margin-inline: auto. Margin sirlari darsidan: normal oqimda faqat gorizontal markazlaydi, bola eni ma'lum bo'lishi kerak. Matn ustuni, sahifa konteyneri uchun — eng to'g'ri yo'l. Vertikal markaz uchun ishlamaydi.

5. position: absolute + inset: 0 + margin: auto. position darsidagi inset: 0 bolani otaning to'rt chetiga "tortadi". Bolaning o'lchami berilgan bo'lsa (bu yerda width va height), qolgan joyni auto margin'lar teng bo'ladi. Shart: otada position (containing block) bo'lsin va bolaning ikkala o'lchami aniq. Rasm ustidagi "Yangi" belgisi, modal oyna uchun.

6. position: absolute + top: 50%; left: 50% + translate: -50% -50%. top: 50% bolaning chap-yuqori burchagini otaning o'rtasiga qo'yadi. translate — elementni layoutni o'zgartirmasdan siljitadigan xususiyat; foizi elementning o'z o'lchamidan olinadi. -50% -50% bolani o'z enining va bo'yining yarmiga orqaga suradi — markaz markazga tushadi. Afzalligi: bolaning o'lchami noma'lum bo'lsa ham ishlaydi. translate va boshqa transformlarni 2D transformlar darsida o'rganamiz. Eski kodda xuddi shuni transform: translate(-50%, -50%) shaklida uchratasiz. Alohida translate xususiyati esa Baseline ma'lumotiga ko'ra 2025-yil fevraldan keng tarqalgan Baseline.

7. align-content: center oddiy blokda. Eng yangi usul: flex ham, grid ham kerak emas. display: block li otaga align-content: center — ichidagi mazmun vertikal o'rtaga tushadi. Gorizontal markaz — text-align: center (bola satr ichida bo'lsa). Bu yangi imkoniyat: Baseline ma'lumotiga ko'ra 2024-yil 16-apreldan Baseline (Chrome 123, Firefox 125, Safari 17.4). Eski brauzer uni tashlab ketadi va mazmun tepada qoladi — o'qiladi, faqat markazda emas. Muhim joyda 1- yoki 3-usulni ishlating.

6.3 Qaysi birini tanlash

Jadval katakchasidagi matn uchun esa Qator balandligi darsidagi vertical-align: middle — u faqat katak va satr ichidagi elementlarda ishlaydi.

6.4 Tuzoq: flex'da place-content

place-content: center ham ko'p maqolada "markazlash" deb yoziladi. U align-content va justify-content ning qisqa yozuvi. Grid'da u ishlaydi. Lekin bitta qatorli flex'da align-content ta'sirsiz (Flex'da tekislash). Chrome'da tekshirdik: display: flex; place-content: center; bolani faqat gorizontal markazladi, vertikal esa tepada qoldi. Flex'da — justify-content + align-items.

Tekshirib ko'ring: Rasm ustida "Aksiya" belgisi rasmning aynan o'rtasida turishi kerak. Belgi matni tilga qarab uzunligi o'zgaradi. Qaysi usul?

7. Ko'p uchraydigan xatolar

7.1 Sticky footer'da keraksiz skroll

body margin'i nolga tushirilmagan. Tuzatish: body { margin: 0; }.

7.2 height: 100vh telefonda footer'ni yashiradi

vh — eng katta ekran bo'yi, panel ko'ringanda sahifaning pasti yashirinadi (Viewport birliklari). Yana: height — qat'iy bo'y, mazmun ko'p bo'lsa u toshib chiqadi. Tuzatish: min-height: 100dvh (zaxira 100vh bilan).

7.3 Maydon tugmani formadan itarib chiqardi

Maydonning tabiiy eni tor ekranga sig'maydi. Tuzatish: input { min-width: 0; }.

7.4 absolute belgi o'rtada emas, sahifa burchagida

Otada position yo'q — containing block butun sahifa bo'lib qoldi (position). Tuzatish: otaga position: relative.

7.5 Menyu havolalari juda kichik

Havola satr ichida — padding bosish maydonini to'liq kattalashtirmaydi. Tuzatish: display: block (yoki inline-block) + padding, keyin DevTools'da o'lchang.

8. Mashqlar

1-mashq (oson): Aksiya bannerini markazlang

«Bahor» bosh sahifasida aksiya bloki: bo'yi kamida 12rem, ichida sarlavha va bitta gap. Matn ikkala o'qda o'rtada bo'lsin.

<section class="aksiya">
  <h2>Payshanba — osh kuni</h2>
  <p>Har payshanba osh 30 000 so'm.</p>
</section>

Ishora: ikkita bola ustma-ust turishi kerak — column. column da qaysi xususiyat vertikal, qaysi biri gorizontal?

<style>
  :root {
    --rang-urgu: #b4461a;
  }
  .aksiya {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 12rem;
    text-align: center;
    color: #fff;
    background-color: var(--rang-urgu);
    border-radius: 12px;
  }
  .aksiya h2,
  .aksiya p {
    margin: 0.25rem 1rem;
  }
</style>
<section class="aksiya">
  <h2>Payshanba — osh kuni</h2>
  <p>Har payshanba osh 30 000 so'm.</p>
</section>

2-mashq (o'rta): Mehmon izohi — media object

«Bahor» saytida mehmonlar izohi: chapda 48 piksellik doira (ismning bosh harfi), o'ngda ism, sana va izoh matni. Talablar: doira qisilmasin va cho'zilmasin; ism va sana bir qatorda, sana o'ng chetda; telefonda ham doira chapda qolsin.

<article>
  <span aria-hidden="true">M</span>
  <div>
    <p><b>Malika</b> <time datetime="2026-09-20">20-sentabr</time></p>
    <p>Osh juda mazali, xizmat tez. Qizim bilan yana kelamiz.</p>
  </div>
</article>

Ishora: ikki qavat flex. Tashqisi — media object («Media object» bo'limidagi retsept, lekin o'ralmasin). Ichkisi — ism va sana qatori, sana margin-left: auto bilan (Auto margin).

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  article {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 32rem;
  }
  article > span {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background-color: var(--rang-asosiy);
    border-radius: 50%;
    font-weight: bold;
  }
  article > div {
    flex: 1;
    min-width: 0;
  }
  article p {
    margin: 0 0 0.25rem;
  }
  article p:first-child {
    display: flex;
    gap: 0.5rem;
  }
  time {
    margin-left: auto;
    color: var(--rang-ikkinchi);
  }
</style>
<article>
  <span aria-hidden="true">M</span>
  <div>
    <p><b>Malika</b> <time datetime="2026-09-20">20-sentabr</time></p>
    <p>Osh juda mazali, xizmat tez. Qizim bilan yana kelamiz.</p>
  </div>
</article>

3-mashq (qiyin): Uch vaziyat — uch usul

Har vaziyatga «Qaysi birini tanlash» jadvalidan usul tanlang, sababini ayting va kodini yozing:

1. «Bahor» rasmi ustida "Tugadi" yozuvi (taom tugaganda). Yozuv uzunligi tilga qarab o'zgaradi, rasmning aynan o'rtasida tursin.
2. Bron sahifasi main i bo'sh: "Hozircha bron yo'q" matni va "Stolni band qilish" havolasi main ning o'rtasida (ikkala o'qda). main — sticky footer naqshidagi flex: 1 element.
3. Tugma ichida belgi va matn: belgi matnning o'rtasiga tekis, tugma matn qatorida (so'zlar orasida) tursin.

.taom-karta.tugadi figure {
  position: relative;
}
.taom-karta.tugadi figure::after {
  content: "Tugadi";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bron-havola {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

4-mashq: Portfolio qadami — navbar va sticky footer

Portfoliongiz sarlavhasi hali ham ikki qator: tepada ism, ostida menyu. Havolalar 21 piksel baland (O'lchamlar auditi). Qisqa sahifalarda footer o'rtada osilib turadi.

1. header — navbar: ism chapda, menyu o'ngda, bir chiziqda. Telefonda menyu ism ostiga o'ralsin.
2. Sarlavhadagi hamma havolalar (ism ham) — kamida 24 piksel baland. Menyu havolalariga yon tomondan 0.5rem ichki joy; Flex'da tekislash darsidagi menyu gap ini 0.25rem ga kamaytiring — endi oraliqni padding beradi.
3. Sticky footer: sahifa qisqa bo'lsa ham footer ekran pastida. 404.html ni ham oching.
4. DevTools bilan 360 va 1280 piksel enda har havolaning o'lchamini yozib oling. Keyin Lighthouse → Accessibility'ni qayta ishga tushiring.

Ishora: header ning bolalari — p va nav. Havola balandligi — «Barmoq uchun joy» bo'limi. Sticky footer — «Retsept» bo'limidagi to'rt qator; header, main, footer dagi width va margin-inline: auto ga tegmang.

/* Navbar: ism chapda, menyu o'ngda, tor ekranda o'raladi */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
}

/* Bosish nishoni: kamida 24 piksel (WCAG 2.5.8) */
header a {
  display: block;
  padding-block: 0.25rem;
}

nav[aria-label="Asosiy menyu"] a {
  padding-inline: 0.5rem;
}

nav[aria-label="Asosiy menyu"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

body {
  /* ... oldingi darslardagi shrift, rang, fon, line-height ... */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

/* Sticky footer: main bo'sh joyni oladi */
main {
  flex: 1;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-ikkinchi: #5b6660;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
    line-height: 1.5;
  }
  header,
  main,
  footer {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  main {
    flex: 1;
  }
  a {
    color: var(--rang-asosiy);
  }
  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
  }
  header a {
    display: block;
    padding-block: 0.25rem;
  }
  nav[aria-label="Asosiy menyu"] a {
    padding-inline: 0.5rem;
    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;
  }
  footer {
    margin-top: 3rem;
    color: var(--rang-ikkinchi);
    border-top: 1px solid currentColor;
  }
</style>
<header>
  <p><a href="../">Aziz Karimov</a></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="../haqimda/">Men haqimda</a></li>
      <li><a href="../loyihalar/">Loyihalar</a></li>
      <li><a href="./" aria-current="page">Aloqa</a></li>
    </ul>
  </nav>
</header>
<main id="asosiy">
  <h1>Aloqa</h1>
  <p>Eng tez yo'l — Telegram.</p>
</main>
<footer>
  <p><small>© 2026 Aziz Karimov.</small></p>
</footer>

9. Real ishda

• Deyarli har bir sayt shu naqshlardan yig'ilgan: GitHub, Telegram Web, onlayn do'konlar. DevTools'da istalgan saytning sarlavhasini tanlang — display: flex va justify-content: space-between ni ko'rasiz.
• Dizayn tizimlari naqshlarga nom beradi: "Stack", "Cluster", "Sidebar", "Center". Bu nomlarni Intrinsic layout darsida ko'rasiz. Figma'da ular Auto Layout sozlamalari (Figma dasturchi uchun 2).
• Flex yoki grid? Bir qator yoki bir ustun — flex; qatorlar va ustunlar birga tekislanishi kerak — grid. To'liq qarorni Layout naqshlari darsida qilamiz.
• Intervyuda so'raladi: "Div'ni markazlashning qanday usullarini bilasiz?" (kamida uchta va har biri qachon), "Sticky footer qanday qilinadi?", "translate(-50%, -50%) nega ishlaydi?".

Xulosa

• Navbar: display: flex + space-between + align-items: center + flex-wrap: wrap; havolalar display: block + padding — kamida 24×24.
• Media object: rasmga flex: none, matnga flex: 1 va min-width: 0, konteynerga align-items: flex-start.
• Sticky footer: body — ustun, min-height: 100dvh, margin: 0; main { flex: 1 }.
• Maydon + tugma: input { flex: 1; min-width: 0 }, button { flex: none }.
• Markazlash: flex yoki grid + place-items — oqimda; margin-inline: auto — faqat gorizontal; absolute + inset: 0 + margin: auto yoki translate(-50%, -50%) — ustida suzganda.
• align-content: center oddiy blokda — yangi Baseline (2024); flex'da place-content vertikal markazlamaydi.

Keyingi dars: Grid'ga kirish: qator, ustun va fr birligi — elementlarni ikki o'q bo'ylab birdaniga, to'r qilib terishni boshlaymiz.

Manbalar

• MDN: "Typical use cases of flexbox", "Center an element", "place-items", "align-content", "translate" — developer.mozilla.org
• W3C: "CSS Box Alignment Module Level 3" (blok konteynerlarda align-content) — w3.org/TR/css-align-3
• W3C WAI: "Understanding SC 2.5.8: Target Size (Minimum)" — w3.org/WAI/WCAG22/Understanding
• web-features (Baseline ma'lumotlari): "align-content-block", "individual-transforms", "viewport-unit-variants" — github.com/web-platform-dx/web-features