Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Flexbox align-items

ULASHISH

CSS align-items xossasi

align-items xossasi flex elementlarni vertikal (ko‘ndalang o‘qda) tekislaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • normal (default)
  • stretch
  • center
  • flex-start
  • flex-end
  • baseline

Misol

center qiymati flex elementlarni konteyner o‘rtasida tekislaydi:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

flex-start qiymati flex elementlarni konteyner yuqori qismida tekislaydi:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

flex-end qiymati flex elementlarni konteyner pastki qismida tekislaydi:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

Misol

stretch qiymati flex elementlarni konteynerni to‘ldirguncha cho‘zadi (bu standart bo‘lgan "normal" ga teng):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Natija:

1
2
3

O‘zingiz sinab ko‘ring »

CSS align-content xossasi

align-content xossasi flex qatorlarni tekislaydi. U faqat flex elementlar bir necha qatorga o‘tganda ta’sir qiladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • stretch (default)
  • center
  • flex-start
  • flex-end
  • space-between
  • space-around
  • space-evenly

Misol

center bilan flex qatorlar konteyner markazi tomon yig‘iladi:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: center;
}

Natija:

1
2
3
4
5
6
7
8
9

O‘zingiz sinab ko‘ring »

Misol

space-between bilan flex qatorlar orasidagi bo‘shliqlar teng bo‘ladi:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-between;
}

Natija:

1
2
3
4
5
6
7
8
9

O‘zingiz sinab ko‘ring »

Flexbox bilan haqiqiy markazlash

Quyidagi misol keng tarqalgan uslublash muammosini — haqiqiy markazlashni — qanday hal qilishni ko‘rsatadi.

Haqiqiy markazlashga erishish uchun flex konteyner uchun justify-content va align-items xossalarini ikkalasini center qilib belgilang — flex element gorizontal ham, vertikal ham mukammal markazlashadi:

True Centering

Misol

.flex-container {
  display: flex;
  height: 400px;
  justify-content: center;
  align-items: center;
}

O‘zingiz sinab ko‘ring »


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish