Flexbox

display:flex, bosh va ko'ndalang o'q, justify-content, align-items, gap, flex-wrap, flex: grow/shrink/basis

10-sinfAdvanced UX/UI6-hafta · 17-dars

Bugun nimalarni o'rganamiz?

Flex asoslari

Konteyner va o'qlar

Tekislash va gap

justify va align

flex elementi

grow, shrink, basis

Takrorlash

box-sizing: border-box da width nimani o'z ichiga oladi?

Umumiy o'lcham padding va border ni ham kiritadi.

Flex asoslari

Konteyner va o'qlar

Flex o'qlari

Birinchi flex


.row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

display: flex ni ota (konteyner) ga yozasiz, bolalarga emas. Faqat bevosita bolalar flex elementi bo'ladi.

Mini-test

display: flex qaysi elementga yoziladi?

Konteynerga yoziladi, bolalari tartiblanadi.

Tekislash va gap

justify va align

Tekislash

Tekislash va qatorlash


/* markazlash */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* kartalar qatori */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

align-items: center vertikal markazlash uchun konteynerning balandligi bo'lishi kerak (min-height yoki height).

Mini-test

Elementlarni chetga surib, oralig'ini teng qiluvchi qiymat?

space-between: birinchi va oxirgi chetda, oraliq teng.

flex elementi

grow, shrink, basis

Navbar

Navbar va teng kartalar


nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
nav .links { margin-left: auto; }

.card {
  flex: 1 1 200px;
}

flex: 1 1 200px + flex-wrap: wrap — mobilda kartalar avtomatik pastga tushadi (kamida 200px kenglikda).

Mini-test

flex: 1 nimani anglatadi?

Barcha elementlar teng o'sadi.

block va flex

Oddiy (block)

Elementlar ustma-ust turadi, tekislash qiyin

flex

Qatorda tizadi, markazlash va oraliq oson

Bir yo'nalishda — Flexbox; ikki yo'nalishda — Grid.

Atamalar. Bosing

Flex konteyner

bosing

display: flex berilgan ota element

Bosh o'q

bosing

Elementlar tizilgan yo'nalish

gap

bosing

Elementlar orasidagi masofa

flex: 1

bosing

Bo'sh joyni teng bo'lishish

Navbar yasash

1. Flex

nav { display: flex; }.

2. Tekislang

align-items: center, gap.

3. Surib qo'ying

margin-left: auto.

justify-content qiymatlari

Qiymat	Natija	Qachon
`flex-start`	boshiga	standart
`center`	o'rtaga	markazlash
`space-between`	chetlarga	navbar, kartalar
`space-around`	atrofida teng	tugmalar
`space-evenly`	hammasi teng	galereya

Pastga bosing: qiymatlar

Kartalar qatori

Konteynerga display: flex; flex-wrap: wrap; gap: 16px; bering.
Har bir kartaga flex: 1 1 200px; bering.
Brauzer oynasini torayting: kartalar pastga tushishini ko'ring.

Markazlash


/* ota */
.hero { text-align: center; }

Markazlash


/* ota */
.hero { display: flex; justify-content: center; align-items: center; }

Flexbox raqamlarda

ta o'q: bosh va ko'ndalang

ta flex xossasi: grow, shrink, basis

ta yo'nalish: Flexbox bir o'lchamli

Flexbox — qator yoki ustun uchun eng qulay vosita.

Amaliy topshiriq 20 daqiqa

OsonQatorga tizing: 3 ta .box ni qatorga qo'yib, oralariga 16px bering.

OsonMarkazlash: .hero ichidagi matnni gorizontal va vertikal markazlang.

O'rtaNavbar: Logo chapda, havolalar o'ngda turadigan navbar yozing.

O'rtaTeng kartalar: 3 ta karta bo'sh joyni teng bo'lishsin.

QiyinMoslashuvchan qator: Kartalar kamida 220px bo'lsin va mobilda pastga tushsin.

BonusTartib: order bilan 3-elementni birinchi qiling.

Dars xulosasi

Konteyner

display: flex, flex-direction, gap.

Tekislash

justify-content (bosh), align-items (ko'ndalang).

Element

flex: 1, flex-wrap, margin-left: auto.

Uyga vazifa: Flexbox navbar va kartalar qatori.

Keyingi dars: CSS Grid

Murakkab sahifa to'rlari

6-hafta · 18-dars