Flex Container — flex-direction, flex-wrap, gap

~20 daq · CSS · Layout — Flexbox

Muammodan boshlaylik

display: flex qo'ydingiz va 12 ta mahsulot kartochkasi bitta qatorga tizildi. Kompyuterda — juda tor kartochkalar, telefonda esa ekrandan tashqariga chiqib ketdi. Kerak edi: sig'masa — keyingi qatorga o'tsin.

Yana: mobil versiyada menyu havolalari yonma-yon emas, ustma-ust bo'lishi kerak. Va kartochkalar orasidagi bo'shliqni marginlar bilan qilsangiz, eng chetdagi kartochkalarda ortiqcha bo'shliq qoladi.

Bu uchta vazifa — flex konteynerning uchta xususiyati: flex-direction, flex-wrap va gap.

flex-direction — yo'nalish

.container {
  display: flex;
  flex-direction: row;   /* standart */
}

row:              column:

┌───┬───┬───┐     ┌───┐
│ 1 │ 2 │ 3 │     │ 1 │
└───┴───┴───┘     ├───┤
                  │ 2 │
                  ├───┤
                  │ 3 │
                  └───┘

column — o'qlar almashadi

13-darsdan: flex-direction: column da asosiy o'q vertikal bo'ladi. Natijada:

• justify-content — endi vertikal tekislaydi
• align-items — endi gorizontal tekislaydi

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* tepada menyu, pastda "Chiqish" tugmasi */
  height: 100dvh;
}

Mobil menyu

.nav {
  display: flex;
  flex-direction: column;     /* telefonda — ustma-ust */
  gap: 8px;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;      /* keng ekranda — yonma-yon */
    gap: 24px;
  }
}

Media query lar — 26-dars.

[!WARNING] row-reverse va column-reverse faqat vizual tartibni o'zgartiradi. Ekran o'quvchilar va klaviatura (Tab) navigatsiyasi HTML dagi tartibda qoladi. Ma'noli tartib muhim bo'lsa — HTML ni o'zgartiring, reverse ni faqat bezak uchun ishlating.

flex-wrap — qatorga o'tish

Standart holatda flex elementlar bitta qatorga sig'ishga majburlanadi — kerak bo'lsa qisqaradi (16-dars), qisqara olmasa — konteynerdan chiqib ketadi.

.products {
  display: flex;
  flex-wrap: wrap;
}

.product-card {
  width: 280px;
}

nowrap (konteyner 700px):          wrap:

┌──────────────────────────┐       ┌──────────────────────────┐
│┌────┐┌────┐┌────┐┌────┐┌─┼──┐    │┌──────┐ ┌──────┐        │
││ 1  ││ 2  ││ 3  ││ 4  ││ 5│  │    ││  1   │ │  2   │        │
│└────┘└────┘└────┘└────┘└─┼──┘    │└──────┘ └──────┘        │
└──────────────────────────┘       │┌──────┐ ┌──────┐        │
  elementlar qisqardi va             ││  3   │ │  4   │        │
  baribir chiqib ketdi               │└──────┘ └──────┘        │
                                    │┌──────┐                 │
                                    ││  5   │                 │
                                    │└──────┘                 │
                                    └──────────────────────────┘

Darsning boshidagi muammo hal: kartochkalar ekranga qarab 1, 2, 3 yoki 4 tadan qatorda.

[!INFO] wrap bilan oxirgi qatordagi elementlar chapga yopishib qoladi (yuqoridagi 5-element). Ko'p hollarda bu normal. Lekin "hamma kartochka bir xil ustunlarda" kerak bo'lsa — bu Grid ning vazifasi (22-dars: auto-fill).

flex-flow — qisqa yozuv

.products {
  flex-flow: row wrap;   /* = flex-direction: row; flex-wrap: wrap; */
}

gap — elementlar orasidagi bo'shliq

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;            /* qatorlar va ustunlar orasida 24px */
}

gap — faqat elementlar orasida, chetlarda emas:

margin bilan (har bir kartochkaga margin: 12px):

┌──────────────────────────────────┐
│ ←12→┌──────┐←24→┌──────┐←12→    │   chetlarda ortiqcha bo'shliq,
│     │  1   │    │  2   │         │   konteyner kengligini hisoblash qiyin
│     └──────┘    └──────┘         │
└──────────────────────────────────┘

gap: 24px:

┌──────────────────────────────────┐
│┌──────┐←24→┌──────┐              │   faqat orasida —
││  1   │    │  2   │              │   chetlar toza
│└──────┘    └──────┘              │
└──────────────────────────────────┘

Alohida qiymatlar:

.grid {
  gap: 32px 16px;       /* qatorlar orasi 32px, ustunlar orasi 16px */
  row-gap: 32px;
  column-gap: 16px;
}

gap ning afzalliklari:

• Chetlarda ortiqcha bo'shliq yo'q — manfiy margin hiylalari kerak emas
• Margin collapse yo'q (9-dars)
• wrap bilan qatorlar orasida ham avtomatik
• Bitta joyda boshqariladi — har bir elementda emas

Bugun flex va grid konteynerlarda elementlar orasidagi bo'shliq uchun — har doim gap.

Amaliy misol: tugmalar guruhi

<div class="actions">
  <button class="btn">Bekor qilish</button>
  <button class="btn btn-primary">Saqlash</button>
</div>

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  .actions {
    flex-direction: column-reverse;   /* telefonda: asosiy tugma tepada, to'liq kenglikda */
  }
}

column da flex elementlar standartda butun kenglikka cho'ziladi (align-items: stretch) — telefonda katta, bosish oson tugmalar.

Nima uchun shunday?

Nima uchun flex-wrap standartda o'chirilgan — elementlar sig'masa avtomatik keyingi qatorga o'tishi tabiiyroq emasmi?

Chunki Flexbox ning asosiy maqsadi — bitta qator ichida bo'sh joyni taqsimlash: menyu, asboblar paneli, tugmalar qatori. Bunday komponentlarda elementlar keyingi qatorga o'tib ketishi kutilmagan va buzuvchi bo'lardi — masalan, menyu havolasi ikkinchi qatorga tushib, header balandligini ikki baravar oshirsa. Shuning uchun standart xatti-harakat — qatorda qolish va moslashish (qisqarish), wrap esa ongli tanlov. Bu Flexbox ning falsafasini ko'rsatadi: u "joylashuv to'ri" emas, "bir qator ichidagi moslashuvchanlik" vositasi; ko'p qatorli tartiblangan to'r uchun Grid bor.

Xulosa

Eslab qoling:

• flex-direction: row (standart), column, row-reverse, column-reverse
• column da o'qlar almashadi: justify-content — vertikal, align-items — gorizontal
• reverse — faqat vizual; HTML tartibi (klaviatura, ekran o'quvchi) o'zgarmaydi
• flex-wrap: wrap — sig'masa keyingi qatorga; standart — nowrap
• flex-flow: row wrap — qisqa yozuv
• gap — faqat elementlar orasida; marginlar o'rniga har doim gap
• row-gap, column-gap — alohida

Keyingi dars

15-dars: Flex Container — justify-content, align-items, align-content