Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Flexbox konteyneri

ULASHISH

CSS Flex konteyner xossalari

Flex konteyner elementi quyidagi xossalarga ega bo‘lishi mumkin:

  • display - flex yoki inline-flex qiymatiga o‘rnatilishi shart
  • flex-direction — flex elementlarning joylashish yo‘nalishini belgilaydi
  • flex-wrap — flex elementlarning yangi qatorga o‘tishi kerakligini belgilaydi
  • flex-flow — flex-direction va flex-wrap uchun qisqartma xossasi
  • justify-content — flex elementlar asosiy o‘q (gorizontal) bo‘sh maydonining hammasini ishlatmasa, ularni tekislaydi
  • align-items — flex elementlar ko‘ndalang o‘q (vertikal) bo‘sh maydonining hammasini ishlatmasa, ularni tekislaydi
  • align-content — ko‘ndalang o‘qda qo‘shimcha joy bo‘lib, flex elementlar yangi qatorga o‘tganda flex qatorlarni tekislaydi

CSS flex-direction xossasi

flex-direction xossasi flex konteyner ichida flex elementlarning joylashish yo‘nalishini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • row (default)
  • column
  • row-reverse
  • column-reverse

Misol

row qiymati standart qiymat bo‘lib, flex elementlarni gorizontal (chapdan o‘ngga) ko‘rsatadi:

.flex-container {
  display: flex;
  flex-direction: row;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

column qiymati flex elementlarni vertikal (yuqoridan pastga) ko‘rsatadi:

.flex-container {
  display: flex;
  flex-direction: column;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

row-reverse qiymati flex elementlarni gorizontal (lekin o‘ngdan chapga) ko‘rsatadi:

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

column-reverse qiymati flex elementlarni vertikal (lekin pastdan yuqoriga) ko‘rsatadi:

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

CSS flex-wrap xossasi

flex-wrap xossasi bitta flex qatorda joy yetmasa, flex elementlarning yangi qatorga o‘tishi kerakligini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • nowrap (default)
  • wrap
  • wrap-reverse

Misol

nowrap qiymati flex elementlarning yangi qatorga o‘tmasligini belgilaydi (bu standart):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Natija:

1
2
3
4
5
6
7
8
9

O‘zingiz sinab ko‘ring »

Misol

wrap qiymati kerak bo‘lganda flex elementlarning yangi qatorga o‘tishini belgilaydi:

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

Natija:

1
2
3
4
5
6
7
8
9

O‘zingiz sinab ko‘ring »

Misol

wrap-reverse qiymati kerak bo‘lganda flex elementlarning teskari tartibda yangi qatorga o‘tishini belgilaydi:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Natija:

1
2
3
4
5
6
7
8
9

O‘zingiz sinab ko‘ring »

CSS flex-flow xossasi

flex-flow xossasi flex-direction va flex-wrap xossalarini birgalikda belgilash uchun qisqartma xossadir.

Misol

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

O‘zingiz sinab ko‘ring »

Flex konteyner ichki sahifalari

Continue learning about flex container properties:


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish