Flexbox

Flexbox (Flexible Box Layout) — elementlarni bir qator yoki bir ustunda oson va moslashuvchan joylashtirish uchun mo'ljallangan CSS moduli. Flexbox'gacha elementlarni yonma-yon terish, markazga qo'yish yoki teng taqsimlash juda qiyin edi (float va boshqa "hiyla"lar bilan). Flexbox bularning barchasini bir necha qatorda hal qiladi. Bu — zamonaviy CSS'ning eng muhim vositalaridan biri.

Asosiy tushuncha: konteyner va elementlar

Flexbox ikki qismdan iborat: flex-konteyner (ota element, unga display: flex beriladi) va uning ichidagi flex-elementlar (bevosita farzandlar). Konteynerga display: flex berishingiz bilan uning barcha bevosita farzandlari avtomatik yonma-yon (bir qatorga) tiziladi.

<!-- HTML -->
<div class="konteyner">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

/* CSS */
.konteyner {
  display: flex;
}

Faqat shu bitta qatordan keyin uchta div bir-birining yoniga chiziladi (odatiy holatda ular bir-birining ostida bo'lardi, chunki div — block element).

Ikkita o'q: asosiy va ko'ndalang

Flexbox'ni tushunish uchun uning ikki o'qini bilish shart:

• Asosiy o'q (main axis) — elementlar tiziladigan asosiy yo'nalish. Standart holatda u gorizontal (chapdan o'ngga);
• Ko'ndalang o'q (cross axis) — asosiy o'qqa perpendikulyar. Standart holatda u vertikal (yuqoridan pastga).

Bu ikkisini eslab qolish muhim, chunki justify-content — asosiy o'q bo'yicha, align-items esa ko'ndalang o'q bo'yicha ishlaydi.

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

Elementlarni asosiy o'q (odatda gorizontal) bo'ylab qanday taqsimlashni belgilaydi:

.konteyner {
  display: flex;
  justify-content: center;
}

• flex-start — boshiga (chapga) yig'iladi (standart);
• flex-end — oxiriga (o'ngga) yig'iladi;
• center — markazga yig'iladi;
• space-between — birinchi va oxirgi chetga, oralar teng bo'shliq;
• space-around — har bir element atrofida teng bo'shliq;
• space-evenly — barcha bo'shliqlar (chetlar ham) mutlaqo teng.

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

Elementlarni ko'ndalang o'q (odatda vertikal) bo'yicha qanday tekislashni belgilaydi:

.konteyner {
  display: flex;
  height: 300px;
  align-items: center;
}

• stretch — elementlar konteyner balandligiga cho'ziladi (standart);
• flex-start — yuqoriga tekislanadi;
• flex-end — pastga tekislanadi;
• center — vertikal markazga tekislanadi;
• baseline — matn asos chizig'i bo'yicha tekislanadi.

.markaz {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

flex-direction — yo'nalishni o'zgartirish

Asosiy o'qning yo'nalishini o'zgartiradi. Buni o'zgartirsangiz, justify-content va align-itemsning o'qlari ham almashadi (chunki ular o'qlarga bog'langan):

• row — gorizontal, chapdan o'ngga (standart);
• row-reverse — gorizontal, o'ngdan chapga;
• column — vertikal, yuqoridan pastga (elementlar ustun bo'lib tiziladi);
• column-reverse — vertikal, pastdan yuqoriga.

.ustun {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

flex-wrap — qatorga sig'masa o'tkazish

Standart holatda flex-elementlar bitta qatorga majburan siqiladi (sig'masa ham). flex-wrap: wrap ularga sig'magan elementlarni keyingi qatorga o'tishga ruxsat beradi:

.galereya {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

gap — elementlar orasidagi bo'shliq

gap flex-elementlar orasiga bir tekis bo'shliq qo'shadi. Ilgari buning uchun har bir elementga margin berish kerak edi (va oxirgisini olib tashlash muammo edi). gap buni juda soddalashtirdi:

.konteyner {
  display: flex;
  gap: 20px;         /* barcha tomondan 20px */
}

/* Qator va ustun uchun alohida */
.panjara {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;    /* qatorlar orasi 10px, ustunlar orasi 30px */
}

flex-grow, flex-shrink, flex-basis — elementlarning egiluvchanligi

Bu uch xossa flex-elementlarning o'ziga (konteynerga emas) beriladi va ularning bo'sh joyni qanday egallashini boshqaradi:

• flex-basis — elementning boshlang'ich o'lchami (masalan 200px yoki auto);
• flex-grow — bo'sh joy bo'lsa, element qanchalik o'sishi (0 = o'smaydi, 1 = o'sadi);
• flex-shrink — joy yetmasa, element qanchalik kichrayishi (0 = kichraymaydi).

Ko'pincha ular bitta qisqartirilgan flex xossasi orqali yoziladi: flex: grow shrink basis.

/* Element barcha bo'sh joyni egallasin */
.katta {
  flex: 1;          /* = flex: 1 1 0 */
}

/* To'liq yozuv */
.element {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}

Amaliy misol: sayt navigatsiya paneli

Flexbox uchun eng keng tarqalgan amaliy holat — sayt tepasidagi navigatsiya paneli: chapda logotip, o'ngda menyu havolalari.

<!-- HTML -->
<nav class="navbar">
  <div class="logo">MySite</div>
  <div class="menyu">
    <a>Bosh sahifa</a>
    <a>Xizmatlar</a>
    <a>Aloqa</a>
  </div>
</nav>

/* CSS */
.navbar {
  display: flex;
  justify-content: space-between;  /* logo chapda, menyu o'ngda */
  align-items: center;            /* vertikal markazda */
  padding: 15px 30px;
}

.menyu {
  display: flex;
  gap: 20px;                       /* havolalar orasi bo'shliq */
}

Xulosa

• Flexbox — bir o'lchamli (qator yoki ustun) joylashuv tizimi;
• Konteynerga display: flex beriladi, farzandlar avtomatik yonma-yon tiziladi;
• asosiy o'q (justify-content) va ko'ndalang o'q (align-items);
• Markazga qo'yish: justify-content: center; align-items: center;;
• flex-direction — yo'nalish (row/column), o'zgarganda o'qlar almashadi;
• flex-wrap: wrap — sig'magan elementlarni keyingi qatorga o'tkazadi;
• gap — elementlar orasidagi bo'shliq;
• flex: 1 — element bo'sh joyni egallaydi (teng ustunlar uchun ideal).