AXV

Flexbox

Elementlarni qatorga, ustunga va markazga joylash

8-sinfWeb Full-stack5-hafta · 13-dars

Takrorlash

box-sizing: border-box nima beradi?

Quti aniq belgilangan o'lchamda qoladi. Yonma-yon qo'yish esa — bugungi mavzu.
01

Konteyner va element

Ota-ona buyuradi, bolalar tiziladi

Ota va bolalar

.qator { display: flex; } 123 nevara — flex emas

Bitta qator CSS


.qator {
  /* hali hech narsa */
}
1
2
3

Bitta qator CSS


.qator {
  display: flex;
  gap: 16px;
}
1
2
3
02

O'qlar va tekislash

justify — asosiy o'q, align — ko'ndalang o'q

Ikki o'q

asosiy o'q · justify-content ko'ndalang · align-items column da o'qlar joy almashadi

flex-direction

QiymatAsosiy o'q
row (standart)chapdan o'ngga →
row-reverseo'ngdan chapga ←
columnyuqoridan pastga ↓
column-reversepastdan yuqoriga ↑

justify-content

flex-start center flex-end space-between space-around

align-items va align-self

align-items

Hamma elementni ko'ndalang o'qda: stretch (standart), flex-start, center, flex-end, baseline.

align-self

Faqat bitta element: .maxsus { align-self: flex-end; }

Konteynerda balandlik bo'lmasa, vertikal tekislash ko'rinmaydi.

Markazlashning «oltin uchligi»


.markaz {
  display: flex;
  justify-content: center;  /* gorizontal */
  align-items: center;      /* vertikal */
  height: 300px;
}

Mini-test

flex-direction: column da justify-content: center qaysi yo'nalishda markazlaydi?

column da asosiy o'q yuqoridan pastga — justify shu o'q bo'yicha.
03

Ko'chirish va joyni bo'lish

flex-wrap, gap, flex-grow / shrink / basis

flex-wrap va gap

nowrap

Standart: sig'masa ham bitta qatorda siqiladi.
VS

wrap

Sig'magan element keyingi qatorga ko'chadi. gap: 16px — oralar.

grow, shrink, basis

XususiyatMa'nosiStandart
flex-basisboshlang'ich o'lchamauto
flex-growbo'sh joydan ulush0
flex-shrinkjoy yetmasa siqilish1

Pastga bosing: flex: 1 va flex: 3

Joyni 1:3 bo'lish

0
.sidebar { flex: 1 }
0
.kontent { flex: 3 }

1 + 3 = 4 ulush. flex-shrink: 0 — logotip siqilmaydi.

Ko'chadigan kartalar


.kartalar { display: flex; flex-wrap: wrap; gap: 16px; }
.karta    { flex: 1 1 200px; padding: 20px; }
/* boshlang'ich 200px: kengayadi, siqiladi, ko'chadi */
04

Amaliyot

Navigatsiya paneli

Navigatsiya paneli


.nav   { display: flex;
         justify-content: space-between;
         align-items: center; height: 70px; }
.menyu { display: flex; gap: 24px; }   /* havolalar — nevaralar! */
.nav a { color: white; text-decoration: none; }
F12 → Elements: flex konteyner yonidagi flex belgisini bosing — o'qlar chizib ko'rsatiladi.

Odatiy xatolar

Noto'g'ri joy

display: flex elementlarga yozilgan — konteynerga yozing.

Siqilgan kartalar

flex-wrap unutilgan — telefonda hamma bir qatorda.

Amaliy topshiriqlar 30 daqiqa

Oson3 quti bir qatorda, markazda, oralari 20px.
O'rtaNavigatsiya paneli: chapda logotip, o'ngda 4 havola.
Qiyin6 ta ko'chadigan karta + 1:3 sidebar va kontent.

Dars xulosasi

Konteyner

display: flex ota elementga.

O'qlar

justify — asosiy, align — ko'ndalang.

Moslashuv

wrap, gap, flex: 1.

Keyingi dars: CSS Grid

Satr va ustunlardan iborat to'r — butun sahifa maketi

5-hafta · 14-dars