# Flexbox asoslari

> CSS Flexbox: elementlarni qatorga tizish va tekislash. justify-content, align-items, gap va flex-wrap xossalari jonli misollarda tushuntiriladi.

Manba: https://learncode.uz/html-css/flexbox/
Sana: 2026-05-22

[O'tgan darsda](https://learncode.uz/html-css/displey-joylashuv) elementlarni yonma-yon qo'yish
uchun `inline-block` dan foydalandik. U ishlaydi, lekin elementlarni tekislash
yoki ular orasidagi joyni teng taqsimlash qiyin kechadi.

Aynan shu muammolar uchun **Flexbox** yaratilgan.

Bu dars yakunida flex konteyner va elementni ajratasiz, main/cross o'qlarini
`flex-direction` ga qarab topasiz, elementlarni tekislab-taqsimlaysiz,
`gap`, `flex`, `wrap` bilan moslashuvchan qator va navbar qura olasiz.

## Ikki daraja: konteyner va elementlar

Flexbox har doim ikki darajada ishlaydi:

- **Konteyner** — tashqi element, unga `display: flex` beriladi.
- **Elementlar** — konteyner ichidagi bevosita farzandlar.

Xossalarning bir qismi konteynerga, bir qismi elementlarga beriladi.

```html
<div class="konteyner">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
  </div>
```

```css
.konteyner {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 10px;
  }
  .element {
    background: #2563eb;
    color: white;
    padding: 20px;
    border-radius: 4px;
  }
```

Bitta `display: flex` qatori bilan uchala element qatorga tizildi.

> **Atama**
>
> **Flexbox** (Flexible Box Layout) — elementlarni bir o'lchamda (qator yoki
> ustun bo'ylab) joylashtirish uchun mo'ljallangan CSS tizimi. Uning kuchi
> elementlar orasidagi bo'sh joyni **avtomatik taqsimlashida**.

## Yo'nalish — `flex-direction`

Standart holatda elementlar qator bo'ylab tiziladi, lekin buni o'zgartirsa
bo'ladi:

```html
<p>row (standart):</p>
  <div class="konteyner row">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
  </div>

  <p>column:</p>
  <div class="konteyner column">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
  </div>
```

```css
.konteyner {
    display: flex;
    background: #f1f5f9;
    padding: 8px;
    gap: 6px;
  }
  .row { flex-direction: row; }
  .column { flex-direction: column; }
  .element {
    background: #2563eb;
    color: white;
    padding: 12px;
    border-radius: 4px;
  }
  p { margin: 8px 0 4px; font-family: sans-serif; }
```

## `justify-content` — asosiy o'q bo'ylab

Bu xossa elementlarni **yo'nalish bo'ylab** taqsimlaydi. `row` holatida
gorizontal bo'yicha ishlaydi:

```html
<p>flex-start</p>
  <div class="k" style="justify-content: flex-start"><div class="e">A</div><div class="e">B</div></div>
  <p>center</p>
  <div class="k" style="justify-content: center"><div class="e">A</div><div class="e">B</div></div>
  <p>space-between</p>
  <div class="k" style="justify-content: space-between"><div class="e">A</div><div class="e">B</div></div>
  <p>space-around</p>
  <div class="k" style="justify-content: space-around"><div class="e">A</div><div class="e">B</div></div>
```

```css
.k {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    margin-bottom: 6px;
  }
  .e {
    background: #2563eb;
    color: white;
    padding: 10px 18px;
    border-radius: 4px;
  }
  p { margin: 6px 0 2px; font-family: sans-serif; font-size: 13px; }
```

| Qiymat | Natija |
|--------|--------|
| `flex-start` | Boshiga yig'iladi (standart) |
| `center` | Markazga yig'iladi |
| `flex-end` | Oxiriga yig'iladi |
| `space-between` | Chetlarga, orasi teng |
| `space-around` | Har element atrofi teng |

## `align-items` — ko'ndalang o'q bo'ylab

`justify-content` yo'nalish bo'ylab ishlagani kabi, `align-items` unga
**perpendikulyar** yo'nalishda ishlaydi:

```html
<p>align-items: center</p>
  <div class="k" style="align-items: center">
    <div class="e">Qisqa</div>
    <div class="e">Ikki qatorli<br>matn</div>
  </div>

  <p>align-items: stretch (standart)</p>
  <div class="k" style="align-items: stretch">
    <div class="e">Qisqa</div>
    <div class="e">Ikki qatorli<br>matn</div>
  </div>
```

```css
.k {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 8px;
    height: 90px;
    margin-bottom: 8px;
  }
  .e {
    background: #2563eb;
    color: white;
    padding: 10px;
    border-radius: 4px;
  }
  p { margin: 6px 0 2px; font-family: sans-serif; font-size: 13px; }
```

<Callout type="tip" title="Yodda tuting">
Elementni sahifa markaziga qo'yishning eng qisqa yo'li — shu ikkovini
birga ishlatish:

```css
.konteyner {
  display: flex;
  justify-content: center;  /* main o'q */
  align-items: center;      /* cross o'q */
}
```

Standart `flex-direction: row` da main o'q gorizontal, cross o'q vertikal.
`column` berilsa bu yo'nalishlar almashadi. Shu sababli xususiyatlarni doim
main/cross o'qlari orqali o'ylash aniqroq.
</Callout>

## `gap` — elementlar orasi

Elementlar orasidagi masofani `margin` bilan emas, `gap` bilan berish qulay:

```html
<div class="k">
    <div class="e">1</div>
    <div class="e">2</div>
    <div class="e">3</div>
  </div>
```

```css
.k {
    display: flex;
    gap: 20px;
    background: #f1f5f9;
    padding: 10px;
  }
  .e {
    background: #2563eb;
    color: white;
    padding: 14px 20px;
    border-radius: 4px;
  }
```

`gap` faqat elementlar **orasiga** joy qo'yadi — chetlarda ortiqcha bo'shliq
qoldirmaydi. `margin` bilan bunga erishish uchun qo'shimcha hiylalar kerak
bo'lardi.

## Element kengligi — `flex`

Flex elementning bo'sh joyni qanday egallashi va tor joyda qanday qisqarishini
`flex-grow`, `flex-shrink` va `flex-basis` boshqaradi. Ko'p ishlatiladigan
qisqa yozuv:

```css
.element {
  flex: 1 1 220px;
}
```

Bu element 220px bazadan boshlanishi, bo'sh joy bo'lsa o'sishi va zarur bo'lsa
qisqarishi mumkinligini bildiradi. `flex: 1` teng ulushli ustunlar uchun qulay,
ammo ichki uzun so'z yoki rasm minimal kenglikni oshirishi mumkin.

## `flex-wrap` — qatorga sig'masa

Standart `nowrap` holatida elementlar imkon qadar qisqarib, bir qatorda
qolishga urinadi; minimal kenglik yoki uzun content bo'lsa overflow ham yuz
berishi mumkin. `flex-wrap` keyingi qatorga o'tishga ruxsat beradi:

```html
<div class="k">
    <div class="e">Element 1</div>
    <div class="e">Element 2</div>
    <div class="e">Element 3</div>
    <div class="e">Element 4</div>
    <div class="e">Element 5</div>
  </div>
```

```css
.k {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #f1f5f9;
    padding: 10px;
  }
  .e {
    background: #2563eb;
    color: white;
    padding: 14px;
    border-radius: 4px;
    width: 120px;
  }
```

Bu xossa [responsiv dizayn](https://learncode.uz/html-css/responsiv-dizayn) uchun muhim — oyna
torayganda elementlar o'zi qatorlarga bo'linadi.

## Amaliy misol: sayt sarlavhasi

Flexbox eng ko'p ishlatiladigan joy — sahifa yuqorisidagi navbar:

```html
<header class="bosh">
    <div class="logo">LearnCode</div>
    <nav class="menyu">
      <a href="#">Darslar</a>
      <a href="#">Bo'limlar</a>
      <a href="#">Aloqa</a>
    </nav>
  </header>
```

```css
.bosh {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    padding: 14px 20px;
    border-radius: 6px;
  }
  .logo {
    color: white;
    font-weight: bold;
    font-size: 18px;
    font-family: sans-serif;
  }
  .menyu {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
  .menyu a {
    color: #cbd5e1;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
  }
  .menyu a:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 3px;
  }
```

Bu yerda Flexbox ikki marta ishlatildi: tashqi `header` logotip bilan menyuni
chetlarga ajratdi, ichki `nav` esa havolalarni tizdi. `wrap` tor joyda
bandlarning konteynerdan chiqib ketishini kamaytiradi; murakkab mobil menyuda
alohida ochish tugmasi va klaviatura boshqaruvi ham kerak bo'ladi.

## Amaliy mashq

Uch kartali qator yarating. Konteynerga flex, gap va wrap, kartalarga
`flex: 1 1 220px` bering. Main va cross o'qlarini izohlang, so'ng
`flex-direction: column` qilib, `justify-content` va `align-items` qaysi
yo'nalishda ishlashini qayta kuzating.

## Qisqacha xulosa

- **Flexbox** — elementlarni bir o'lchamda joylashtirish tizimi.
- Konteynerga `display: flex` beriladi, farzandlar avtomatik tiziladi.
- `flex-direction` — yo'nalish: `row` yoki `column`.
- `justify-content` — yo'nalish bo'ylab taqsimlash.
- `align-items` — ko'ndalang yo'nalish bo'ylab tekislash.
- Markazlashtirish: `justify-content: center` + `align-items: center`.
- `gap` — elementlar orasidagi masofa; `flex-wrap: wrap` — qatorga o'tish.
- `flex` elementning o'sish, qisqarish va boshlang'ich o'lchamini boshqaradi.

Keyingi darsda [Grid asoslari](https://learncode.uz/html-css/grid) — ikki o'lchamli, ya'ni qator
va ustun bilan birga ishlaydigan joylashuv tizimini ko'ramiz.