4.4-dars: Flexbox

display: flex — konteyner «aqlli» bo'ladi

Ilgari elementlarni qatorga joylashtirish uchun dasturchilar float, inline-block va manfiy margin'lar sehri bilan azob chekishardi. Bu og'riqli edi. Keyin Flexbox keldi — va hammasi oson bo'lib qoldi.

Flexbox (Flexible Box Layout'ning qisqartmasi) — elementlar joylashuvini bashorat qilinadigan va moslashuvchan qiladigan CSS-moduli. Faqat ota-elementga display: flex deyish kifoya, va uning farzandlari sehrli tarzda tekis qatorga tizilib qoladi.

.container {
  display: flex;
}

Xolos. Bitta qator — va bola elementlar endi bir-birining ostida turgan oddiy bloklar bo'lishdan to'xtaydi. Ular flex-elementlarga aylanadi va o'zining ota-konteyneriga bo'ysunadi.

Flex'siz har bir <div> o'z qatorida bo'lardi. Flex bilan esa ular yelka-yelkaga turishadi. Lekin bu faqat boshlanishi. Flexbox'ning haqiqiy kuchi biz ularning aynan qanday turishini boshqara boshlaganimizda ochiladi.

Flexbox ikki o'lchamda ishlaydi, lekin u aslida bitta yo'nalish bo'ylab kuchli — asosiy o'q (main axis) va ko'ndalang o'q (cross axis) bo'ylab. Asosiy o'q — bu elementlar joylashadigan yo'nalish. Odatiy holatda — chapdan o'ngga (matndagi qatorlar kabi).

Keling, sxemaga qaraylik:

     ──────── asosiy o'q (main axis) ────────→
    ┌────────────────────────────────────────┐
    │  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐│
    │  │  1   │  │  2   │  │  3   │  │  4   ││
 ↑  │  └──────┘  └──────┘  └──────┘  └──────┘│
 │  └────────────────────────────────────────┘
ko'ndalang o'q (cross axis)

Hozircha shuni yodda tut: main axis — bu elementlar qarab turgan tomon (odatiy holatda o'ngga), cross axis esa ularga perpendikulyar (odatiy holatda pastga). Flexbox'ning barcha xususiyatlari shu ikki o'q atrofida aylanadi.

flex-direction — yo'nalish

Odatiy holatda elementlar qatorga (chapdan o'ngga) tiziladi. Lekin flexbox ustunga ham tiza oladi. Bunga flex-direction xususiyati javob beradi.

.container {
  display: flex;
  flex-direction: row;        /* odatiy — qatorga */
  flex-direction: row-reverse; /* qator teskari tartibda */
  flex-direction: column;      /* ustunga yuqoridan pastga */
  flex-direction: column-reverse; /* ustun pastdan yuqoriga */
}

Mana row va column orasidagi farq qanday ko'rinadi:

flex-directionni o'zgartirganingda, asosiy o'q buriladi. rowda elementlar o'ngga boradi (main axis — gorizontal). columnda — pastga (main axis — vertikal). Biz ko'rib chiqadigan boshqa barcha flexbox xususiyatlari shu o'qqa nisbatan ishlaydi.

row-reverse va column-reverse xuddi shuni qiladi, lekin teskari tartibda:

Tartib vizual ravishda o'zgaradi, HTML esa o'zgarishsiz qoladi. Bu razmetkani o'zgartirmasdan ko'rinish tartibini o'zgartirish kerak bo'lganda qulay.

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

Bu, ehtimol, flexbox'ning eng ko'p ishlatiladigan xususiyati. justify-content elementlarning asosiy o'q bo'ylab qanday taqsimlanishini boshqaradi (ya'ni qator bo'ylab o'ngga yoki ustun bo'ylab pastga).

.container {
  display: flex;
  justify-content: flex-start;   /* boshiga taqalgan (odatiy) */
  justify-content: flex-end;     /* oxiriga taqalgan */
  justify-content: center;       /* markazda */
  justify-content: space-between; /* birinchisi boshida, oxirgisi oxirida, qolganlari teng */
  justify-content: space-around;  /* har birining atrofida teng bo'shliq */
  justify-content: space-evenly;  /* qat'iy teng bo'shliqlar */
}

Amalda qanday ko'rinishiga qara. Har bir misol — turli justify-contentga ega bitta xil konteyner:

E'tibor ber: space-between va space-evenly orasidagi farqqa. space-betweenda birinchi element chap chetga, oxirgisi o'ng chetga taqalgan. space-evenlyda barcha elementlar orasidagi (chetlarni ham qo'shgan holda) bo'shliqlar qat'iy bir xil. space-around — murosa: har bir element atrofidagi bo'shliqlar bir xil, lekin chetlarda ular ikki baravar kichik (chunki qo'shnilar bilan qo'shilmaydi).

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

Agar justify-content asosiy o'q bo'ylab ishlasa, align-items — ko'ndalang o'q bo'ylab ishlaydi. Sodda qilib aytganda: agar elementlar qatorda (row) bo'lsa, align-items ularning vertikal holatini boshqaradi.

.container {
  display: flex;
  align-items: stretch;    /* butun balandlikka cho'zish (odatiy) */
  align-items: flex-start; /* yuqoriga taqash */
  align-items: flex-end;   /* pastga taqash */
  align-items: center;     /* vertikal bo'yicha markazlash */
  align-items: baseline;   /* matnning asosiy chizig'i bo'yicha tekislash */
}

Farqqa qara. Bu yerda barcha konteynerlar 120px balandlikda, elementlar esa turli balandlikda:

align-items: centerning eng ko'p ishlatilishi — elementni vertikal bo'yicha markazlash. Ilgari buning uchun ancha mashaqqat chekishga to'g'ri kelardi, endi esa — bitta qator CSS.

.parent {
  display: flex;
  align-items: center;      /* vertikal bo'yicha */
  justify-content: center;  /* gorizontal bo'yicha */
}

/* Bitta qatorda mukammal markazlash! */

Mana bu qanday ko'rinadi:

Bor-yo'g'i ikkita xususiyat — va element ham vertikal, ham gorizontal bo'yicha mukammal markazlashadi. Blok ichida istalgan narsa bo'lishi mumkin: matn, rasm, forma. flexbox hammasini markazlashtiradi.

Bu shu qadar keng tarqalgan patternki, uni alohida klassga ajratishadi:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Undan doiralardagi ikonkalar uchun, modal oynalarni markazlashtirish uchun, preloaderlar uchun — biror narsani aynan o'rtaga joylashtirish kerak bo'lgan har joyda foydalan.

gap — elementlar orasidagi masofa

Ilgari flex-elementlar orasida bo'shliq yaratish uchun har bir elementda margin ishlatishardi. Bu ishlardi, lekin noqulay edi — ortiqcha bo'shliq bo'lmasligi uchun oxirgi elementning margin'ini olib tashlash kerak edi. Keyin gap paydo bo'ldi, va hammasi osonlashdi.

.container {
  display: flex;
  gap: 20px;  /* barcha elementlar orasidagi masofa */
}

/* Qatorlar va ustunlar uchun turli qiymatlar belgilash mumkin */
gap: 16px 24px; /* row-gap column-gap */
row-gap: 16px;
column-gap: 24px;

gap faqat elementlar orasiga bo'shliq qo'shadi. Birinchi/oxirgi elementdan oldin va keyin bo'shliq bo'lmaydi. Bu ro'yxatlar, menyular, kartochkalar uchun juda mos.

E'tibor ber: ikkinchi misolda elementlar orasidagi bo'shliq 24px, lekin chap va o'ng chetgacha bo'shliq yo'q. gap chetlarga bo'shliq qo'shmaydi, faqat elementlar orasiga. Agar chetlarda bo'shliq kerak bo'lsa — konteynerda paddingdan foydalan.

flex-wrap — yangi qatorga o'tkazish

Odatiy holatda flex-elementlar bitta qatorga sig'ishga harakat qiladi. Agar ular sig'masa, siqiladi (flexbox elementlarni kichraytira oladi). Lekin ko'pincha ularning matndagi so'zlar kabi keyingi qatorga o'tishi kerak bo'ladi. Buning uchun flex-wrap bor.

.container {
  display: flex;
  flex-wrap: nowrap;    /* o'tkazilmaydi (odatiy) */
  flex-wrap: wrap;      /* sig'masa, o'tkaziladi */
  flex-wrap: wrap-reverse; /* teskari tartibda o'tkaziladi */
}

wrap qanday ishlashiga qara:

E'tibor ber: elementlar o'tkazilganda, ular bir nechta qator hosil qiladi. Har bir qator alohida flex-konteyner sifatida ishlaydi. Flex-wrap ayniqsa quyidagilar uchun foydali:

• Kartochkalar to'ri (mahsulotlar katalogi, galereya)
• Teglar va kategoriyalar
• Bandlar sig'may qolishi mumkin bo'lgan menyular
• Izohli ikonkalar ro'yxati

Mana flex-wrapli kartochkalar to'ri misoli:

Har bir kartochka 170px qat'iy kenglikka ega. Ular qatorga sig'masa, flex-wrap ularni keyingi qatorga o'tkazadi. Gap esa ular orasida ozoda bo'shliqlar yaratadi. Buning barchasi — bitta ham margin yoki floatsiz.

Amaliyot: mahsulot kartochkalari qatorda, blokni markazlashtirish

Keling, o'rgangan hamma narsamizni bitta loyihaga jamlaymiz. Biz mahsulotlar bo'limini yasaymiz:

• Mahsulot kartochkalari qatorda
• Mazmunni markazlashtirish
• Gap orqali kartochkalar orasidagi bo'shliqlar
• Sig'masa, yangi qatorga o'tkazish

Mana to'liq kod. Nusxala va brauzerda och:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mahsulotlar katalogi</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 40px 20px;
  }
  .section-title {
    text-align: center;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 32px;
  }
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
  }
  .product-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    width: 240px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  }
  .product-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    margin: 0 auto 16px;
  }
  .product-card h3 {
    margin: 0 0 6px;
    color: #333;
    font-size: 1.2em;
  }
  .product-desc {
    color: #777;
    font-size: 0.9em;
    margin: 0 0 14px;
    line-height: 1.5;
  }
  .product-price {
    font-size: 1.4em;
    font-weight: bold;
    color: #10b981;
    margin: 0;
  }
  .product-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.9em;
    transition: opacity 0.2s;
  }
  .product-btn:hover {
    opacity: 0.85;
  }
</style>
</head>
<body>
  <h1 class="section-title">📦 Bizning mahsulotlarimiz</h1>
  <div class="product-grid">
    <div class="product-card">
      <div class="product-icon">📱</div>
      <h3>Smartfon</h3>
      <p class="product-desc">6.7" ekran, 128GB xotira</p>
      <p class="product-price">49 990 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
    <div class="product-card">
      <div class="product-icon">💻</div>
      <h3>Noutbuk</h3>
      <p class="product-desc">15.6", 16GB RAM, SSD 512GB</p>
      <p class="product-price">89 990 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
    <div class="product-card">
      <div class="product-icon">🎧</div>
      <h3>Quloqchinlar</h3>
      <p class="product-desc">Simsiz, ANC</p>
      <p class="product-price">7 490 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
    <div class="product-card">
      <div class="product-icon">⌚</div>
      <h3>Aqlli soat</h3>
      <p class="product-desc">GPS, puls o'lchagich, suv o'tkazmaydi</p>
      <p class="product-price">24 990 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
    <div class="product-card">
      <div class="product-icon">📷</div>
      <h3>Kamera</h3>
      <p class="product-desc">24MP, 4K video</p>
      <p class="product-price">55 000 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
    <div class="product-card">
      <div class="product-icon">🖨️</div>
      <h3>Printer</h3>
      <p class="product-desc">Lazerli, ikki tomonlama chop etish</p>
      <p class="product-price">12 990 ₽</p>
      <a href="#" class="product-btn">Sotib olish</a>
    </div>
  </div>
</body>
</html>

Bu yerda flexbox nimalarda ishlatilganini ko'rib chiqamiz:

• .product-grid — flex-wrap: wrap va gap: 24px bilan display: flex. Bu kartochkalar avtomatik ravishda yangi qatorga o'tadigan to'r yaratadi.
• justify-content: center — kartochkalarning butun qatorini markazlashtiradi.
• .product-icon — align-items: center va justify-content: center bilan display: flex. Ikonka doirachada mukammal markazlashgan.
• .product-btn — display: inline-block (flex emas, lekin inline-joylashuv uchun ham).

E'tibor ber: biz bitta ham float, clearfix yoki marginli display: inline-block ishlatmadik. Hammasi sof flexbox bilan qilingan.

Mana yana bir misol — istalgan mazmunni markazlashtirish. Bu juda keng tarqalgan pattern:

<div class="hero">
  <div class="hero-content">
    <h1>Xush kelibsiz!</h1>
    <p>Sizni saytimizda ko'rganimizdan xursandmiz</p>
    <a href="#" class="btn">Batafsil bilish</a>
  </div>
</div>

<style>
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    text-align: center;
    padding: 20px;
  }
  .hero h1 {
    font-size: 3em;
    margin: 0 0 12px;
  }
  .hero p {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0 0 24px;
  }
  .btn {
    display: inline-block;
    padding: 14px 36px;
    background: #fff;
    color: #667eea;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
  }
  .btn:hover {
    transform: scale(1.05);
  }
</style>

Bu misolda .hero — ekranning butun balandligiga ega flex-konteyner (min-height: 100vh). align-items: center va justify-content: center bola .hero-contentni aynan o'rtada markazlashtiradi. Kontent istalgan balandlikda bo'lishi mumkin — u har doim markazda bo'ladi.

Keling, xulosa qilaylik. Mana flexbox bo'yicha shpargalka:

/* FLEXBOX — SHPARGALKA */

/* Ota-element (konteyner) */
display: flex;
flex-direction: row | column;
flex-wrap: wrap | nowrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
gap: 16px;

/* Bola (flex-element) */
flex: 1;                      /* barcha bo'sh joyga cho'ziladi */
flex: 0 0 200px;              /* siqilmaydi, o'smaydi, kengligi 200px */
align-self: center;           /* o'z tekislanishi (align-items'ni bekor qiladi) */
order: 1;                     /* tartib (odatiy 0) */

Yodda tutish kerak bo'lgan asosiylari:

• display: flex konteynerda flexbox'ni yoqadi
• Asosiy o'q — flex-direction (row yoki column)
• justify-content — asosiy o'q bo'ylab
• align-items — ko'ndalang o'q bo'ylab
• gap — elementlar orasidagi masofa (juda qulay!)
• flex-wrap: wrap — yangi qatorga o'tkazish
• justify-content: center + align-items: center kombinatsiyasi — mukammal markazlash

Flexbox — zamonaviy sahifa tuzilishining asosidir. Uni his qilishni o'rgan, va sen deyarli har qanday joylashuvni qiyinchiliksiz yasay olasan. Keyingi darsda biz pozitsionerlashga o'tamiz — bu CSSning yana bir muhim vositasi.