Flex Container — justify-content, align-items, align-content

~20 daq · CSS · Layout — Flexbox

Muammodan boshlaylik

Flex konteyner elementlardan kengroq yoki balandroq bo'lsa — bo'sh joy qoladi. Uni qanday taqsimlash kerak?

  • Elementlar chapda, o'rtada yoki o'ngdami?
  • Elementlar orasida teng bo'shliqmi?
  • Turli balandlikdagi elementlar tepaga, pastga yoki o'rtaga tekislansinmi?

Buning uchun uchta xususiyat bor. Ularni chalkashtirish — Flexbox dagi eng keng tarqalgan xato. Kalit — 13-darsdagi ikki o'q.

justify-content   →  ASOSIY o'q bo'yicha     (row da — gorizontal)
align-items       →  KO'NDALANG o'q bo'yicha (row da — vertikal)
align-content     →  bir nechta QATORNI ko'ndalang o'q bo'yicha (faqat wrap bilan)

justify-content — asosiy o'q

Elementlar sig'gandan keyin qolgan bo'sh joyni asosiy o'q bo'ylab taqsimlaydi.

.container {
  display: flex;
  justify-content: flex-start;   /* standart */
}

flex-start       │■■■                    │   boshida (standart)
flex-end         │                    ■■■│   oxirida
center           │          ■■■          │   o'rtada
space-between    │■         ■          ■│   chetlar yopishgan, orasida teng
space-around     │  ■      ■      ■     │   har birining atrofida teng (chetda — yarmi)
space-evenly     │    ■     ■     ■     │   hamma bo'shliqlar mutlaqo teng
Qiymat Qachon
flex-start Oddiy ro'yxatlar, matn
center Markazlash, tugmalar guruhi
flex-end "Saqlash" tugmalari o'ngda (forma oxirida)
space-between Header: logo — chetda, menyu — boshqa chetda
space-evenly Teng taqsimlangan ikonkalar (mobil pastki menyu) 
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

[!INFO] justify-content faqat bo'sh joy bo'lganda ta'sir qiladi. Agar elementlar flex-grow (16-dars) bilan butun joyni egallagan bo'lsa — hech narsa o'zgarmaydi. "justify-content ishlamayapti" — ko'pincha sabab shu.

Bitta elementni chetga surish — margin: auto

<header class="header">
  <a class="logo">DevDocs</a>
  <a>Kurslar</a>
  <a>Blog</a>
  <a class="login">Kirish</a>
</header>

.header {
  display: flex;
  gap: 24px;
}

.login {
  margin-left: auto;   /* barcha bo'sh joyni chapdan "yutadi" → o'ngga suriladi */
}

│ DevDocs  Kurslar  Blog                         Kirish │

Flex ichida margin: auto bo'sh joyni yutadi. Bir guruhni bir tomonga, boshqasini — boshqa tomonga ajratishning eng sodda usuli.

align-items — ko'ndalang o'q

Har bir qator ichida elementlarni ko'ndalang o'q bo'ylab tekislaydi.

row yo'nalishida (ko'ndalang o'q — vertikal), elementlar turli balandlikda:

stretch (standart)   flex-start        center            flex-end          baseline
┌──────────────┐    ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│█  █  █       │    │█  █  █       │  │              │  │              │  │█             │
│█  █  █       │    │█  █          │  │█  █          │  │      █       │  │█ █Matn █     │
│█  █  █       │    │█             │  │█  █  █       │  │   █  █       │  │█ █    █      │
│█  █  █       │    │              │  │█             │  │█  █  █       │  │              │
└──────────────┘    └──────────────┘  └──────────────┘  └──────────────┘  └──────────────┘
 hammasi cho'zilgan   tepada            o'rtada           pastda            matn chizig'i bo'yicha
Qiymat Xatti-harakat
stretch Ko'ndalang o'q bo'ylab cho'ziladi (standart) — bir xil balandlikdagi kartochkalar
flex-start Boshida (row da — tepada)
center O'rtada — ikonka va matnni tekislash
flex-end Oxirida
baseline Matnning asosiy chizig'i bo'yicha — turli o'lchamdagi shriftlar

Eng ko'p ishlatiladigani — ikonka va matn:

.btn {
  display: inline-flex;
  align-items: center;     /* ikonka matn bilan bir chiziqda */
  gap: 8px;
}

[!WARNING] stretch faqat elementning ko'ndalang o'qdagi o'lchami berilmagan bo'lsa ishlaydi. .card { height: 200px; } bo'lsa — cho'zilmaydi. Shuningdek align-items: center yoki boshqa qiymat berilsa, kartochkalar o'z balandligiga qaytadi — "bir xil balandlik" yo'qoladi.

Bitta elementni alohida — align-self

.item-special {
  align-self: flex-end;   /* faqat shu element pastga */
}

align-self — flex elementning xususiyati (16-dars), align-items ni shu element uchun bekor qiladi.

align-content — qatorlar orasidagi joy

Faqat flex-wrap: wrap bilan va bir nechta qator bo'lganda ishlaydi. Qatorlarning o'zini — bir butun sifatida — ko'ndalang o'q bo'ylab taqsimlaydi.

.gallery {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  align-content: flex-start;   /* qatorlar tepada, orasida ortiqcha joy yo'q */
}

align-content: stretch (standart)       align-content: flex-start

┌──────────────────────┐                ┌──────────────────────┐
│ ■ ■ ■                │                │ ■ ■ ■                │
│                      │                │ ■ ■                  │
│                      │                │                      │
│ ■ ■                  │                │                      │
│                      │                │                      │
└──────────────────────┘                └──────────────────────┘
 qatorlar orasida katta bo'shliq          qatorlar zich, tepada

Qiymatlari justify-content bilan bir xil (flex-start, center, space-between...) va stretch.

align-items align-content
Nimani tekislaydi Elementlarni har bir qator ichida Qatorlarni konteyner ichida
Qachon ishlaydi Har doim Faqat wrap va bir nechta qator

place-content — qisqa yozuv

.center {
  display: flex;
  place-content: center;   /* align-content + justify-content */
  align-items: center;
}

Markazlash uchun klassik uchlik — display: flex; justify-content: center; align-items: center; — eng tushunarli va eng ko'p ishlatiladigani.

Amaliy misol: mahsulot kartochkasi

<article class="card">
  <img src="noutbuk.jpg" alt="Noutbuk">
  <h3>Noutbuk Pro 14</h3>
  <p>Qisqa tavsif...</p>
  <div class="card-footer">
    <span class="price">12 500 000 so'm</span>
    <button class="btn">Savatga</button>
  </div>
</article>

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-footer {
  margin-top: auto;              /* har doim kartochkaning eng pastida */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Kartochkalar bir xil balandlikda (13-dars: stretch), tavsif uzunligidan qat'i nazar narx va tugma har doim pastda bir chiziqda turadi — margin-top: auto bo'sh joyni yutadi.

Nima uchun shunday?

Nima uchun tekislash uchun "chap/o'ng/tepa/past" emas, "start/end" va "asosiy/ko'ndalang o'q" kabi abstrakt tushunchalar?

Chunki bitta komponent turli yo'nalishlarda ishlashi kerak. flex-direction: column ga o'tganingizda yoki sayt arab tiliga (o'ngdan chapga) tarjima qilinganda "chap" va "o'ng" ma'nosini yo'qotadi — justify-content: left noto'g'ri tomonga tekislar edi. "Boshi" va "oxiri" esa har qanday yo'nalishda to'g'ri: row da — chap va o'ng, column da — tepa va past, arab tilida — o'ng va chap. Abstrakt tushunchalarni bir marta o'rganib, siz har qanday yo'nalish va tilda avtomatik to'g'ri ishlaydigan layout yozasiz.

Xulosa

Eslab qoling:

  • justify-content — asosiy o'q: flex-start, center, flex-end, space-between, space-evenly
  • align-items — ko'ndalang o'q, har bir qator ichida: stretch (standart), center, flex-start, baseline
  • align-content — qatorlarni taqsimlash; faqat wrap va bir nechta qator
  • stretch — o'lcham berilmagan bo'lsa; boshqa qiymat — bir xil balandlik yo'qoladi
  • margin-left: auto / margin-top: auto — bitta elementni chetga surish
  • align-self — bitta elementni alohida tekislash
  • Markazlash: justify-content: center + align-items: center

Keyingi dars

16-dars: Flex Item — flex-grow, flex-shrink, flex-basis, order, align-self