Flexbox: elementlarni joylashtirish

Istalgan saytni oching: tepada logotip va menyu yonma-yon turadi, mahsulot kartalari qator bo'lib terilgan, tugmalar chiroyli tekislangan. Oddiy HTML bloklari esa bir-birining ostiga tushib ketadi. Bu darsda elementlarni qatorga terish, tekislash va ular orasiga joy qo'yishning eng qulay vositasi — Flexbox bilan tanishamiz.

Bu darsda

Nega bloklar ustma-ust turadi va display: flex buni qanday hal qiladi
Konteyner va elementlar, asosiy va ko'ndalang o'q
justify-content, align-items va gap bilan tekislash
flex-direction, flex-wrap va flex: 1
Istalgan narsani markazga qo'yish — mashhur «uch qator»
Amaliyot: menyu paneli, kartalar qatori va sahifaning pastki qismi

Muammo: bloklar ustma-ust turadi

Quti modeli darsida ko'rganimizdek, <div>, <p>, <h1> kabi blok elementlar butun kenglikni egallaydi va har doim yangi qatordan boshlanadi. Shuning uchun ular bir-birining ostiga tushadi:

<style>
  body { font-family: sans-serif; }
  .quti { background: #4f8ef7; color: white; padding: 16px;
          margin: 4px; border-radius: 8px; }
</style>

<div class="quti">1</div>
<div class="quti">2</div>
<div class="quti">3</div>

Uchta quti — uchta qator. Lekin bizga ko'pincha ular yonma-yon turishi kerak: menyu bandlari, kartalar, tugmalar. Ilgari buning uchun turli «hiyla»lar ishlatilardi (float, inline-block), ular noqulay va chalkash edi. Bugun esa buning uchun maxsus vosita bor.

display: flex — bitta qator, katta o'zgarish

Flexbox (inglizcha flexible box — «moslashuvchan quti») — elementlarni bir yo'nalish bo'yicha terish va tekislash uchun CSS usuli. U har doim ikki darajada ishlaydi:

Flex-konteyner (flex container) — ota element. Unga display: flex; yoziladi.
Flex-elementlar (flex items) — konteynerning bevosita bolalari. Ular avtomatik ravishda qatorga teriladi.

Yuqoridagi uchta qutini bitta <div class="qator"> ichiga o'raymiz va unga bor-yo'g'i bitta qator CSS yozamiz:

<style>
  body { font-family: sans-serif; }
  .qator { display: flex; }
  .quti { background: #4f8ef7; color: white; padding: 16px;
          margin: 4px; border-radius: 8px; }
</style>

<div class="qator">
  <div class="quti">1</div>
  <div class="quti">2<br>ikki qatorli</div>
  <div class="quti">3</div>
</div>

Bitta display: flex; — va qutilar yonma-yon turdi! E'tibor bering:

Har bir quti endi butun kenglikni emas, faqat mazmuni uchun kerakli joyni egallaydi.
2-qutining matni ikki qatorli, lekin uchala qutining balandligi bir xil: flex-elementlar standart holatda konteyner balandligiga cho'ziladi.
display: flex faqat bevosita bolalarga ta'sir qiladi. Qutilar ichidagi matn odatdagidek qoladi.

Konteyner — kitob javoni, elementlar — kitoblar. Javonga «kitoblarni chapdan o'ngga ter», «o'rtaga jamla», «orasini teng qil» deb buyruq berasiz — har bir kitobga alohida emas. Flexbox'da ham buyruqlarning ko'pchiligi konteynerga yoziladi.

Ikki o'q: asosiy va ko'ndalang

Flexbox'ni tushunishning kaliti — ikki o'q (yo'nalish):

Asosiy o'q (main axis) — elementlar terilib boradigan yo'nalish. Standart holatda — chapdan o'ngga.
Ko'ndalang o'q (cross axis) — unga perpendikulyar yo'nalish. Standart holatda — yuqoridan pastga.

Flex-konteyner va uning elementlari. Standart holatda asosiy o'q gorizontal, ko'ndalang o'q vertikal.

Shuni eslab qoling: justify-content elementlarni asosiy o'q bo'yicha, align-items esa ko'ndalang o'q bo'yicha joylaydi. Endi ikkalasini ham amalda ko'ramiz.

justify-content — asosiy o'q bo'yicha joylash

justify-content (inglizcha «mazmunni tekislash») konteynerdagi bo'sh joyni elementlar atrofida qanday taqsimlashni belgilaydi. Quyidagi muharrirda center so'zini jadvaldagi boshqa qiymatlarga almashtirib ko'ring:

<style>
  body { font-family: sans-serif; }
  .qator {
    display: flex;
    justify-content: center;  /* shu qiymatni almashtiring */
    background: #eef3fb;
    border: 2px dashed #9db4d8;
    padding: 8px;
  }
  .quti { width: 70px; padding: 14px 0; text-align: center;
          color: white; font-weight: bold; border-radius: 8px; }
  .a { background: #e4572e; }
  .b { background: #4f8ef7; }
  .c { background: #2bb673; }
</style>

<div class="qator">
  <div class="quti a">A</div>
  <div class="quti b">B</div>
  <div class="quti c">C</div>
</div>

Qiymat	Nima qiladi
`flex-start`	Elementlar boshiga (chapga) yig'iladi. Bu — standart qiymat.
`flex-end`	Elementlar oxiriga (o'ngga) yig'iladi.
`center`	Elementlar o'rtaga yig'iladi.
`space-between`	Birinchi va oxirgi element chetlarga yopishadi, bo'sh joy elementlar orasida teng bo'linadi.
`space-around`	Har bir element atrofida teng joy bor. Chetlardagi bo'shliq ichkaridagidan ikki baravar kichik.
`space-evenly`	Barcha bo'shliqlar — chetlarda ham, orada ham — mutlaqo teng.

Oltita qiymatni bir joyda solishtirish uchun quyidagi muharrirda har bir qatorga style atributi orqali boshqa qiymat berilgan:

<style>
  body { font-family: sans-serif; font-size: 13px; margin: 8px; }
  .qator { display: flex; gap: 4px; padding: 4px;
           margin: 2px 0 10px; background: #eef3fb; }
  .qator span { width: 44px; height: 20px; border-radius: 5px;
                background: #4f8ef7; }
</style>

<b>flex-start</b>
<div class="qator" style="justify-content: flex-start">
  <span></span> <span></span> <span></span>
</div>
<b>flex-end</b>
<div class="qator" style="justify-content: flex-end">
  <span></span> <span></span> <span></span>
</div>
<b>center</b>
<div class="qator" style="justify-content: center">
  <span></span> <span></span> <span></span>
</div>
<b>space-between</b>
<div class="qator" style="justify-content: space-between">
  <span></span> <span></span> <span></span>
</div>
<b>space-around</b>
<div class="qator" style="justify-content: space-around">
  <span></span> <span></span> <span></span>
</div>
<b>space-evenly</b>
<div class="qator" style="justify-content: space-evenly">
  <span></span> <span></span> <span></span>
</div>

Amalda eng ko'p ishlatiladiganlari: space-between (masalan, logotip chapda, menyu o'ngda) va center (biror narsani o'rtaga qo'yish).

align-items — ko'ndalang o'q bo'yicha joylash

align-items («elementlarni tekislash») elementlarni ko'ndalang o'q bo'yicha — standart holatda vertikal — joylaydi. Farqni ko'rish uchun konteynerga balandlik beramiz va qutilarni har xil o'lchamda qilamiz:

<style>
  body { font-family: sans-serif; }
  .qator {
    display: flex;
    align-items: center;  /* stretch, flex-start, flex-end, baseline */
    gap: 10px;
    height: 160px;
    background: #eef3fb;
    border: 2px dashed #9db4d8;
  }
  .quti { width: 70px; padding: 10px 0; text-align: center;
          color: white; border-radius: 8px; }
  .a { background: #e4572e; font-size: 14px; }
  .b { background: #4f8ef7; font-size: 32px; }
  .c { background: #2bb673; font-size: 20px; }
</style>

<div class="qator">
  <div class="quti a">A</div>
  <div class="quti b">B</div>
  <div class="quti c">C</div>
</div>

Qiymat	Nima qiladi
`stretch`	Elementlar konteyner balandligiga cho'ziladi. Bu — standart qiymat (elementga `height` berilmagan bo'lsa ishlaydi).
`flex-start`	Elementlar yuqoriga (ko'ndalang o'q boshiga) yopishadi.
`center`	Elementlar o'rtada turadi.
`flex-end`	Elementlar pastga yopishadi.
`baseline`	Elementlardagi matnning tagi bir chiziqda turadi — shrift o'lchami har xil bo'lsa qulay.

gap — elementlar orasidagi masofa

Yuqoridagi misolda gap: 10px; qatori bor edi. gap («oraliq») konteynerga yoziladi va elementlar orasiga masofa qo'yadi — chetlarga emas. Har bir elementga margin berishdan ancha qulay:

.qator {
  display: flex;
  gap: 16px;          /* barcha oraliqlar 16px */
}
.setka {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 10px;     /* qatorlar orasi 20px, ustunlar orasi 10px */
}

Sinab ko'ring: justify-content muharririga qaytib, .qator ga gap: 30px; qo'shing va flex-start qiymatini tanlang.

flex-direction — yo'nalishni o'zgartirish

Standart holatda elementlar qatorga (row) teriladi. flex-direction («flex yo'nalishi») bilan buni o'zgartirish mumkin:

Qiymat	Yo'nalish
`row`	Chapdan o'ngga (standart)
`row-reverse`	O'ngdan chapga
`column`	Yuqoridan pastga — ustun bo'lib
`column-reverse`	Pastdan yuqoriga

<style>
  body { font-family: sans-serif; }
  .menyu {
    display: flex;
    flex-direction: column;  /* row qilib ko'ring */
    align-items: center;
    gap: 8px;
    background: #eef3fb;
    padding: 12px;
  }
  .menyu a { background: #1f4fa8; color: white; text-decoration: none;
             padding: 8px 16px; border-radius: 6px; }
</style>

<nav class="menyu">
  <a href="#">Bosh sahifa</a>
  <a href="#">Darslar</a>
  <a href="#">Biz haqimizda</a>
  <a href="#">Aloqa</a>
</nav>

flex-direction: column bo'lganda o'qlar almashadi: asosiy o'q endi vertikal, ko'ndalang o'q esa gorizontal. Shuning uchun yuqoridagi misolda havolalarni gorizontal bo'yicha o'rtaga align-items: center qo'ydi, justify-content emas. Ko'pchilik aynan shu joyda adashadi!

flex-wrap — sig'maganda keyingi qatorga

Standart holatda flex-elementlar bitta qatorda turishga harakat qiladi: joy yetmasa, ular siqiladi yoki konteynerdan chiqib ketadi. flex-wrap: wrap; («o'rash») esa sig'magan elementlarni keyingi qatorga o'tkazadi — xuddi kitobdagi so'zlar kabi:

<style>
  body { font-family: sans-serif; }
  .yorliqlar {
    display: flex;
    flex-wrap: wrap;   /* nowrap qilib ko'ring */
    gap: 8px;
  }
  .yorliq { background: #dcf1ef; color: #0b6e63; padding: 6px 14px;
            border-radius: 20px; white-space: nowrap; }
</style>

<div class="yorliqlar">
  <span class="yorliq">HTML</span>  <span class="yorliq">CSS</span>
  <span class="yorliq">JavaScript</span>  <span class="yorliq">Flexbox</span>
  <span class="yorliq">Grid</span>  <span class="yorliq">Python</span>
  <span class="yorliq">Git</span>  <span class="yorliq">GitHub</span>
  <span class="yorliq">VS Code</span>  <span class="yorliq">Terminal</span>
  <span class="yorliq">DevTools</span>  <span class="yorliq">Emmet</span>
  <span class="yorliq">Node.js</span>  <span class="yorliq">React</span>
</div>

nowrap qilsangiz, yorliqlar bitta qatorga tiqilib, o'ng tomondan chiqib ketadi. wrap esa ularni chiroyli qilib keyingi qatorga o'tkazadi. Kartalar, rasmlar, yorliqlar kabi ko'p elementli ro'yxatlarda deyarli doim flex-wrap: wrap yoziladi.

Elementlarning o'z xususiyati: flex: 1

Hozirgacha hamma xususiyatlarni konteynerga yozdik. Lekin ba'zilari elementga yoziladi. Eng foydalisi — flex-grow («o'sish»): element konteynerdagi bo'sh joydan qancha ulush olishini bildiradi. Odatda uning qisqa yozuvi ishlatiladi: flex: 1.

<style>
  body { font-family: sans-serif; }
  .sahifa { display: flex; gap: 10px; margin-bottom: 16px; }
  .yon { width: 150px; background: #fde7c4; padding: 12px; }
  .asosiy { flex: 1; background: #d7ecff; padding: 12px; }
  .u { padding: 12px; color: white; text-align: center; border-radius: 6px; }
</style>

<div class="sahifa">
  <aside class="yon">Yon panel (150px)</aside>
  <main class="asosiy">Asosiy qism (flex: 1) — qolgan hamma joy</main>
</div>

<div class="sahifa">
  <div class="u" style="flex: 1; background: #e4572e">flex: 1</div>
  <div class="u" style="flex: 2; background: #4f8ef7">flex: 2</div>
  <div class="u" style="flex: 1; background: #2bb673">flex: 1</div>
</div>

Birinchi qatorda yon panel 150px ni oldi, flex: 1 li asosiy qism esa qolgan hamma joyni egalladi. Ikkinchi qatorda joy 1 : 2 : 1 nisbatda bo'lindi — o'rtadagi element yonidagilardan ikki baravar keng. Oynaning kengligi qanday bo'lmasin, bu nisbat saqlanadi.

Element xususiyati	Ma'nosi
`flex-grow`	Bo'sh joydan olinadigan ulush. Standart: `0` (o'smaydi).
`flex-shrink`	Joy yetmaganda siqilish ulushi. Standart: `1`. `0` — umuman siqilmasin.
`flex-basis`	Elementning boshlang'ich o'lchami (masalan, `200px`). Standart: `auto`.
`flex`	Uchalasining qisqa yozuvi. `flex: 1` — «bo'sh joyni teng bo'lib ol». `flex: 1 1 200px` — «200px dan boshla, joy bo'lsa kengay, kam bo'lsa toraygin».

Istalgan narsani markazga qo'yish

Dasturchilar orasida «elementni sahifa o'rtasiga qanday qo'yaman?» degan savol uzoq yillar hazil bo'lib yurgan — chunki eski usullar juda chalkash edi. Flexbox bilan javob — konteynerga uch qator:

<style>
  body { font-family: sans-serif; margin: 0; }
  .sahna {
    display: flex;
    justify-content: center;  /* gorizontal bo'yicha o'rta */
    align-items: center;      /* vertikal bo'yicha o'rta */
    height: 240px;
    background: linear-gradient(135deg, #1f4fa8, #2bb673);
  }
  .karta { background: white; padding: 20px 28px; border-radius: 12px;
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); text-align: center; }
  .karta h2 { margin: 0; }
  .karta p { margin: 6px 0 0; color: #555; }
</style>

<div class="sahna">
  <div class="karta">
    <h2>Markazdaman!</h2>
    <p>Ikkala o'q bo'yicha ham</p>
  </div>
</div>

Vertikal markazlash sezilishi uchun konteynerning balandligi bo'lishi kerak. Aks holda konteyner mazmuni qadar past bo'ladi va «o'rta» bilan «tepa» farq qilmaydi. Butun ekran o'rtasiga qo'yish uchun odatda body { margin: 0; min-height: 100vh; } yoziladi — 100vh «ekran balandligining 100 foizi» degani.

Amaliyot: sahifaning haqiqiy qismlari

Endi o'rganganlarimizni deyarli har bir saytda uchraydigan qismlarda qo'llaymiz.

Navigatsiya paneli: logotip chapda, havolalar o'ngda

<style>
  body { font-family: sans-serif; margin: 0; }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #1f2a44;
  }
  .logo { color: white; font-weight: bold; font-size: 20px; }
  .navbar ul { display: flex; gap: 18px;
               list-style: none; margin: 0; padding: 0; }
  .navbar a { color: #cfe0ff; text-decoration: none; }
  .navbar a:hover { color: white; }
</style>

<header class="navbar">
  <div class="logo">Sayohat.uz</div>
  <nav>
    <ul>
      <li><a href="#">Bosh sahifa</a></li>
      <li><a href="#">Shaharlar</a></li>
      <li><a href="#">Aloqa</a></li>
    </ul>
  </nav>
</header>

Bu yerda flex ikki qavat: .navbar — konteyner, logotip va <nav> — uning elementlari (space-between ularni chetlarga suradi). <ul> esa o'zi ham flex-konteyner: undagi <li> lar qatorga terilgan. Flex ichida flex — mutlaqo odatiy holat.

Kartalar qatori, sig'masa — keyingi qatorga

<style>
  body { font-family: sans-serif; background: #f4f6fa; }
  .kartalar { display: flex; flex-wrap: wrap; gap: 16px; }
  .karta {
    flex: 1 1 180px;   /* 180px dan boshla, joy bo'lsa kengay */
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .karta img { display: block; width: 100%; height: 110px;
               object-fit: cover; }
  .karta h3 { margin: 10px 12px 4px; font-size: 17px; }
  .karta p { margin: 0 12px 12px; color: #555; font-size: 14px; }
</style>

<div class="kartalar">
  <div class="karta">
    <img src="../assets/rasmlar/registon.svg" alt="Registon">
    <h3>Samarqand</h3>
    <p>Registon maydoni va qadimiy madrasalar.</p>
  </div>
  <div class="karta">
    <img src="../assets/rasmlar/tog.svg" alt="Tog'lar">
    <h3>Chimyon</h3>
    <p>Toza havo va go'zal tog' manzaralari.</p>
  </div>
  <div class="karta">
    <img src="../assets/rasmlar/olma.svg" alt="Olma">
    <h3>Farg'ona</h3>
    <p>Mazali mevalar va bog'lar vodiysi.</p>
  </div>
</div>

Har bir karta 180px dan boshlanadi va bo'sh joy bo'lsa kengayadi. object-fit: cover rasmni cho'zmasdan, qutiga qirqib sig'diradi. «Yangi oynada» tugmasini bosib, brauzer oynasini toraytirib ko'ring: joy yetmay qolganda kartalar o'z-o'zidan keyingi qatorga o'tadi. Bitta qator media so'rovsiz ham sahifani telefonga moslashtirdi!

Sahifaning pastki qismi (footer)

<style>
  body { font-family: sans-serif; margin: 0; }
  footer { background: #1f2a44; color: #cfe0ff; padding: 20px; }
  .ustunlar { display: flex; flex-wrap: wrap; gap: 24px; }
  .ustun { flex: 1 1 150px; }
  .ustun h4 { color: white; margin: 0 0 8px; }
  .ustun p { margin: 4px 0; font-size: 14px; }
  .past { display: flex; justify-content: space-between;
          flex-wrap: wrap; gap: 8px; font-size: 13px;
          margin-top: 16px; padding-top: 12px;
          border-top: 1px solid #3a4766; }
</style>

<footer>
  <div class="ustunlar">
    <div class="ustun">
      <h4>Sayohat.uz</h4>
      <p>O'zbekiston bo'ylab sayohatlar.</p>
    </div>
    <div class="ustun">
      <h4>Bo'limlar</h4>
      <p>Shaharlar</p> <p>Tog'lar</p>
    </div>
    <div class="ustun">
      <h4>Aloqa</h4>
      <p>+998 90 123 45 67</p> <p>info@sayohat.uz</p>
    </div>
  </div>
  <div class="past">
    <span>&copy; 2026 Sayohat.uz</span>
    <span>Telegram · Instagram</span>
  </div>
</footer>

Uchta ustun teng bo'lib joylashgan, tor ekranda esa bir-birining ostiga tushadi. Eng pastki qatorda yana tanish usul: space-between. © — © belgisini chiqaradigan HTML maxsus belgisi.

Flexbox'ni o'yin orqali mustahkamlang: Flexbox Froggy o'yinida qurbaqachalarni nilufar barglariga justify-content, align-items va boshqa xususiyatlar bilan joylashtirasiz. 24 ta bosqich bor; sahifaning yuqori o'ng burchagidagi menyudan o'zingizga qulay tilni tanlash mumkin. Uni tugatganingizdan keyin Flexbox «qo'lingizga o'tirib qoladi».

Mashqlar

1-mashq Menyu panelini tekislang

.menyu elementini flex-konteynerga aylantiring: logotip chapda, havolalar o'ngda bo'lsin (space-between), ikkalasi esa vertikal bo'yicha o'rtada tursin (align-items).

<style>
  body { font-family: sans-serif; margin: 0; }
  .menyu {
    background: #0b6e63;
    padding: 10px 20px;
    /* shu yerga yozing */
  }
  .logo { color: white; font-size: 24px; font-weight: bold; }
  .havolalar a { color: white; text-decoration: none;
                 margin-left: 14px; }
  .havolalar .tugma { background: #ffd166; color: #333;
                      padding: 8px 14px; border-radius: 6px; }
</style>

<header class="menyu">
  <div class="logo">Kitobxon</div>
  <nav class="havolalar">
    <a href="#">Kitoblar</a>
    <a href="#">Mualliflar</a>
    <a href="#" class="tugma">Kirish</a>
  </nav>
</header>

Ishora

Hamma xususiyatlar konteynerga — .menyu ga yoziladi. .logo va .havolalar — uning ikki flex-elementi.

Yechimni ko'rish

<style>
  body { font-family: sans-serif; margin: 0; }
  .menyu {
    background: #0b6e63;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo { color: white; font-size: 24px; font-weight: bold; }
  .havolalar a { color: white; text-decoration: none;
                 margin-left: 14px; }
  .havolalar .tugma { background: #ffd166; color: #333;
                      padding: 8px 14px; border-radius: 6px; }
</style>

<header class="menyu">
  <div class="logo">Kitobxon</div>
  <nav class="havolalar">
    <a href="#">Kitoblar</a>
    <a href="#">Mualliflar</a>
    <a href="#" class="tugma">Kirish</a>
  </nav>
</header>

2-mashq Qutini markazga qo'ying

Qizil quti balandligi 200px bo'lgan .sahna ichida turibdi. Flexbox yordamida uni sahnaning aynan o'rtasiga — ham gorizontal, ham vertikal bo'yicha — qo'ying. Qutining o'ziga hech narsa yozish shart emas.

<style>
  body { font-family: sans-serif; }
  .sahna {
    height: 200px;
    background: #eef3fb;
    /* qutini shu konteynerning o'rtasiga qo'ying */
  }
  .quti {
    width: 80px;
    height: 80px;
    background: tomato;
    border-radius: 12px;
  }
</style>

<div class="sahna">
  <div class="quti"></div>
</div>

Yechimni ko'rish

<style>
  body { font-family: sans-serif; }
  .sahna {
    height: 200px;
    background: #eef3fb;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .quti {
    width: 80px;
    height: 80px;
    background: tomato;
    border-radius: 12px;
  }
</style>

<div class="sahna">
  <div class="quti"></div>
</div>

3-mashq Ijodiy: profil kartasi

Quyida profil kartasining HTML qismi tayyor. Uni Flexbox bilan chiroyli joylashtiring:

.profil ni flex-konteyner qiling: rasm chapda, matn o'ngda, vertikal bo'yicha o'rtada, orasida 16px masofa.
.tugmalar ichidagi ikki tugmani qatorga tering va orasiga 8px joy qo'ying.
Ism va kasbni o'zingiznikiga almashtiring, ranglarni ham o'zingizga yoqqanidek tanlang.

<style>
  body { font-family: sans-serif; background: #f4f6fa; }
  .profil { background: white; padding: 16px;
            border-radius: 12px; max-width: 420px; }
  .profil img { width: 90px; height: 90px; border-radius: 50%; }
  .profil h3 { margin: 0; }
  .profil p { margin: 4px 0 10px; color: #666; }
  .tugmalar a { background: #1f4fa8; color: white; font-size: 14px;
                padding: 6px 12px; border-radius: 6px;
                text-decoration: none; }
</style>

<div class="profil">
  <img src="../assets/rasmlar/avatar.svg" alt="Avatar">
  <div>
    <h3>Aziza Karimova</h3>
    <p>Boshlovchi veb-dasturchi</p>
    <div class="tugmalar">
      <a href="#">Yozish</a>
      <a href="#">Kuzatish</a>
    </div>
  </div>
</div>

Namuna yechim

<style>
  body { font-family: sans-serif; background: #f4f6fa; }
  .profil { background: white; padding: 16px;
            border-radius: 12px; max-width: 420px;
            display: flex; align-items: center; gap: 16px; }
  .profil img { width: 90px; height: 90px; border-radius: 50%; }
  .profil h3 { margin: 0; }
  .profil p { margin: 4px 0 10px; color: #666; }
  .tugmalar { display: flex; gap: 8px; }
  .tugmalar a { background: #1f4fa8; color: white; font-size: 14px;
                padding: 6px 12px; border-radius: 6px;
                text-decoration: none; }
</style>

<div class="profil">
  <img src="../assets/rasmlar/avatar.svg" alt="Avatar">
  <div>
    <h3>Aziza Karimova</h3>
    <p>Boshlovchi veb-dasturchi</p>
    <div class="tugmalar">
      <a href="#">Yozish</a>
      <a href="#">Kuzatish</a>
    </div>
  </div>
</div>

O'zingizni sinang

Elementlarni qatorga terish uchun display: flex; qayerga yoziladi?

Har bir elementga alohida
Faqat <body> ga
Elementlarni o'rab turgan ota elementga (konteynerga)
Birinchi elementga

To'g'ri. display: flex konteynerga yoziladi va uning bevosita bolalari flex-elementlarga aylanadi.

justify-content: space-between; nima qiladi?

Chetki elementlarni chetlarga yopishtiradi, bo'sh joyni elementlar orasida teng bo'ladi
Hamma elementlarni o'rtaga yig'adi
Elementlarni vertikal bo'yicha cho'zadi
Elementlarni teskari tartibda teradi

To'g'ri. Shuning uchun u menyu panellarida juda ko'p ishlatiladi: logotip chapda, havolalar o'ngda.

Konteynerda flex-direction: column; yozilgan. Endi justify-content elementlarni qaysi yo'nalishda joylaydi?

Chapdan o'ngga
Hech qaysi — u column bilan ishlamaydi
Diagonal bo'yicha
Yuqoridan pastga (vertikal)

To'g'ri. column da asosiy o'q vertikal bo'ladi, justify-content esa doim asosiy o'q bo'yicha ishlaydi.

Elementni konteynerning aynan o'rtasiga (ikkala o'q bo'yicha) qo'yish uchun konteynerga nima yoziladi?

text-align: center;
display: flex; justify-content: center; align-items: center;
display: flex; flex-wrap: wrap;
margin: center;

To'g'ri. Mashhur uch qator! Faqat konteynerning balandligi bo'lishini unutmang.

Konteynerda .yon { width: 200px; } va .asosiy { flex: 1; } elementlari bor. .asosiy qancha joy egallaydi?

Aniq 1px
Konteynerning yarmini
Yon paneldan qolgan barcha bo'sh joyni
200px

To'g'ri. flex: 1 — «bo'sh joyni ol». Yon panel bittagina bo'lgani uchun qolgan hamma joy .asosiy ga tegadi.

Xulosa

display: flex konteynerga yoziladi va uning bevosita bolalarini qatorga teradi.
Ikki o'q bor: justify-content — asosiy o'q bo'yicha, align-items — ko'ndalang o'q bo'yicha joylaydi.
gap — elementlar orasidagi masofa, flex-wrap: wrap — sig'maganlarni keyingi qatorga o'tkazish.
flex-direction: column elementlarni ustun qilib teradi va o'qlarni almashtiradi.
flex: 1 elementga yoziladi: u qolgan bo'sh joyni egallaydi.
Markazga qo'yish: display: flex; justify-content: center; align-items: center; (konteynerning balandligi bo'lsin).
Keyingi darsda ikki o'lchamli joylashuv — CSS Grid va sahifani telefonga moslashtirishni o'rganamiz.