Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

W3.CSS Flexbox

ULASHISH

Flexbox maketi

CSS Flexbox — elementlarni qator yoki ustun bo‘ylab joylashtirish uchun mo‘ljallangan maket tizimi.

W3.CSS’ning w3-flex klassi Flexbox konteynerini yaratadi.

w3-flex klassi

w3-flex klassi flex konteyner yaratadi.

Flex konteynerning ichki elementlari (children) flex elementlarga (flex items) aylanadi.

Item 1

Item 2

Item 3

Misol

<div class="w3-flex">   <div class="w3-container w3-blue">Item 1</div>   <div class="w3-container w3-light-blue">Item 2</div>   <div class="w3-container w3-blue">Item 3</div> </div>
O‘zingiz sinab ko‘ring »

w3-flex klassi flex konteynerni yaratadi.

CSS xususiyatlari flex konteyner va uning elementlarini boshqaradi.

Flex yo‘nalishi

Standart holatda flex elementlar bir qatorda ko‘rsatiladi.

1

2

3

Flex elementlarning yo‘nalishini o‘zgartirish uchun CSS’ning flex-direction xususiyatidan foydalaning:

1

2

3

Misol

<div class="w3-flex" style="flex-direction:column">   <div>1</div>   <div>2</div>   <div>3</div> </div>
O‘zingiz sinab ko‘ring »

Flex oraliqlari (gap)

CSS’ning gap xususiyati flex elementlar orasiga bo‘shliq qo‘shadi.

1

2

3

Misol

<div class="w3-flex" style="gap:16px">   <div>1</div>   <div>2</div>   <div>3</div> </div>
O‘zingiz sinab ko‘ring »

Flex elementlarni keyingi qatorga o‘tkazish

Standart holatda flex elementlar bitta qatorda qoladi.

Elementlarning yangi qatorga o‘tishiga ruxsat berish uchun flex-wrap:wrap qiymatidan foydalaning.

Wrapping Item 1

Wrapping Item 2

Wrapping Item 3

Wrapping Item 4

Misol

<div class="w3-flex" style="flex-wrap:wrap;gap:8px">   <div>Wrapping Item 1</div>   <div>Wrapping Item 2</div>   <div>Wrapping Item 3</div>   <div>Wrapping Item 4</div> </div>
O‘zingiz sinab ko‘ring »

Flex elementlar keyingi qatorga o‘tishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.

Gorizontal tekislash

justify-content xususiyati elementlarning flex yo‘nalishi bo‘ylab qanday joylashishini boshqaradi.

1

2

3

Misol

<div class="w3-flex" style="justify-content:center">   <div>1</div>   <div>2</div>   <div>3</div> </div>
O‘zingiz sinab ko‘ring »

space-between qiymati elementlar orasiga bo‘shliq qo‘yadi:

1

2

3

Misol

<div class="w3-flex" style="justify-content:space-between">   <div>1</div>   <div>2</div>   <div>3</div> </div>
O‘zingiz sinab ko‘ring »

Vertikal tekislash

Flex elementlarning vertikal tekislanishini boshqarish uchun align-items xususiyatidan foydalaning.

1

2

3

Misol

<div class="w3-flex" style="height:150px;align-items:center">   <div>1</div>   <div>2</div>   <div>3</div> </div>
O‘zingiz sinab ko‘ring »

Mukammal markazlashtirish

Flexbox kontentni ham gorizontal (justify-content:center), ham vertikal (align-items:center) markazlashtirishni osonlashtiradi.

Markazda

Misol

<div class="w3-flex" style="height:200px;justify-content:center;align-items:center">   <div class="w3-container w3-blue">Centered</div> </div>
O‘zingiz sinab ko‘ring »

Flex elementlar

Flex konteynerning ichki elementlari flex elementlar (flex items) deb ataladi.

Item 1

Item 2

Item 3

Flex elementlar quyidagilarni qila oladi:

  • Kattalashish
  • Kichrayish
  • O‘lchamni o‘zgartirish
  • Tartibni o‘zgartirish
  • Mustaqil ravishda tekislanish

Flex elementlarning CSS xususiyatlari

Flex elementlar uchun eng ko‘p ishlatiladigan xususiyatlar quyidagilar:

  • order
  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self

Flex elementlar tartibi

CSS’ning order xususiyati flex elementning vizual tartibini o‘zgartiradi.

1

2

3

Misol

<div class="w3-flex">   <div style="order:3">1</div>   <div style="order:2">2</div>   <div style="order:1">3</div> </div>
O‘zingiz sinab ko‘ring »

flex xususiyati

CSS’ning flex xususiyati flex element mavjud bo‘sh joyning qancha qismini egallashini boshqaradi.

Qat’iy

Egiluvchan

Misol

<div class="w3-flex">   <div>Fixed</div>   <div style="flex:1">Flexible</div> </div>
O‘zingiz sinab ko‘ring »

flex:1 elementning mavjud bo‘sh joyni egallashini ta’minlaydi.

Egiluvchan ustunlar

style="flex:1" yordamida ikkita flex element mavjud kenglikni bo‘lishib olishi mumkin.

1

1

Misol

<div class="w3-flex">   <div style="flex:1">1</div>   <div style="flex:1">2</div> </div>
O‘zingiz sinab ko‘ring »

style="flex:2" yordamida bir elementni boshqasiga qaraganda ikki baravar egiluvchan qilish mumkin.

1

2

style="flex:3" yordamida bir elementni boshqasiga qaraganda uch baravar egiluvchan qilish mumkin.

1

2

Misol

<div class="w3-flex">   <div style="flex:1">1</div>   <div style="flex:2">2</div> </div> <div class="w3-flex">   <div style="flex:1">1</div>   <div style="flex:3">2</div> </div>
O‘zingiz sinab ko‘ring »

flex-grow xususiyati

flex-grow: 8;

flex-grow xususiyati element boshqa elementlarga nisbatan qanchalik kattalasha olishini boshqaradi.

Standart qiymati — 0.

1

2

3

Misol

Ikkinchi flex element boshqa flex elementlarga qaraganda 8 marta tezroq kattalashsin:

<div class="w3-flex">   <div style="flex-grow: 1">1</div>   <div style="flex-grow: 8">2</div>   <div style="flex-grow: 1">3</div> </div>

O‘zingiz sinab ko‘ring »

flex-shrink xususiyati

style="flex-shrink: 0"

flex-shrink xususiyati joy yetarli bo‘lmaganda element qanchalik kichraya olishini boshqaradi.

Standart qiymati — 1.

1

2

3

4

5

6

7

8

9

10

Misol

Uchinchi flex element boshqa flex elementlar kabi kichraymasin:

<div class="w3-flex">   <div>1</div>   <div>2</div>   <div style="flex-shrink: 0">3</div>   <div>4</div>   <div>5</div>   <div>6</div>   <div>7</div>   <div>8</div>   <div>9</div>   <div>10</div> </div>

O‘zingiz sinab ko‘ring »

style="flex-shrink:0" flex elementning kichrayishiga yo‘l qo‘ymaydi.

flex-basis xususiyati

flex-basis: 200px;

flex-basis xususiyati flex elementning boshlang‘ich uzunligini belgilaydi.

200px

auto

auto

auto

Misol

Birinchi flex elementning boshlang‘ich uzunligini 200 piksel qilib belgilang:

<div class="w3-flex">   <div style="flex-basis: 200px">200px</div>   <div>auto</div>   <div>auto</div>   <div>auto</div> </div>

O‘zingiz sinab ko‘ring »

flex xususiyati flex-grow, flex-shrink va flex-basis uchun qisqa yozuvdir.

flex xususiyati

flex xususiyati flex-grow, flex-shrink va flex-basis xususiyatlari uchun qisqa yozuv (shorthand) xususiyatidir.

Misol

Uchinchi flex element kattalashmaydigan (0), kichraymaydigan (0) va boshlang‘ich uzunligi 200 piksel bo‘lsin:

<div class="w3-flex">   <div>1</div>   <div>2</div>   <div style="flex: 0 0 200px">3</div>   <div>4</div> </div>

O‘zingiz sinab ko‘ring »

align-self xususiyati

align-self xususiyati egiluvchan konteyner ichidagi tanlangan element uchun tekislashni belgilaydi.

align-self xususiyati konteynerning align-items xususiyati orqali o‘rnatilgan standart tekislashni bekor qiladi.

1

2

3

4

5

align-self xususiyatini yaxshiroq namoyish qilish uchun ushbu misollarda balandligi 200 piksel bo‘lgan konteynerdan foydalanamiz:

Misollar

Uchinchi flex elementni konteynerning o‘rtasiga tekislang:

<div class="w3-flex">   <div>1</div>   <div>2</div>   <div style="align-self:center">3</div>   <div>4</div> </div>

O‘zingiz sinab ko‘ring »

Uchinchi flex elementni konteynerning yuqori qismiga tekislang:

<div class="w3-flex">   <div>1</div>   <div>2</div>   <div style="align-self:flex-start">3</div>   <div>4</div> </div>

O‘zingiz sinab ko‘ring »

Uchinchi flex elementni konteynerning pastki qismiga tekislang:

<div class="w3-flex">   <div>1</div>   <div>2</div>   <div style="align-self:flex-end">3</div>   <div>4</div> </div>

O‘zingiz sinab ko‘ring »

Elementni oxiriga surish

Flex konteyner ichida avtomatik tashqi bo‘shliqlar (margin) juda foydali.

Elementni oxiriga surish uchun style="margin-left:auto" atributidan foydalaning.

Home

Products

Login

Misol

<div class="w3-flex">   <div>Home</div>   <div>Products</div>   <div style="margin-left:auto">Login</div> </div>
O‘zingiz sinab ko‘ring »

Elementni pastga surish

Vertikal flex konteynerda margin-top:auto elementni pastga suradi.

Become Certified

Learn the material and test your skills.

Misol

<div class="w3-flex" style="height:250px;flex-direction:column">   <h3>Become Certified</h3>   <p>Learn the material and test your skills.</p>   <button style="margin-top:auto">     Get Certified   </button> </div>
O‘zingiz sinab ko‘ring »

Avtomatik tashqi bo‘shliqlar flex konteyner ichidagi mavjud bo‘sh joyni egallaydi.

Navigatsiya panelini yaratish

w3-flex klassi navigatsiya elementlarini bir qatorga joylashtirish uchun juda mos keladi.

MySite

Home About Contact Login

Misol

<div class="w3-flex w3-dark-grey" style="align-items:center">   <div class="w3-container">MySite</div>   <a class="w3-button">Home</a>   <a class="w3-button">About</a>   <a class="w3-button">Contact</a>   <a class="w3-button" style="margin-left:auto">Login</a> </div>
O‘zingiz sinab ko‘ring »

Eslatma

Navigatsiya elementlarining oraliqlari, tekislanishi va o‘lchamlarini boshqarish kerak bo‘lganda w3-flex klassi qulay.

Biroq an’anaviy navigatsiya paneli yoki asboblar paneli uchun aynan shu maqsadda yaratilgan W3.CSS navigatsiya panelini tavsiya qilamiz.

Flexbox va Grid

Flexbox ham, Grid ham zamonaviy CSS maket tizimlaridir.

Maket Eng mos holatlar
Flexbox Elementlarni asosan bir yo‘nalishda joylashtirish
Grid Qator va ustunlardan iborat maketlar

Elementlarni asosan qator yoki ustun bo‘ylab joylashtirish kerak bo‘lganda Flexbox’dan foydalaning.

Maket ikki o‘lchamda ishlashi kerak bo‘lganda Grid’dan foydalaning.

w3-grid haqida keyingi bobda bilib olasiz.

Flex yo‘nalishini teskari qilish

Misollar

flex-direction: row-reverse;
O‘zingiz sinab ko‘ring »
flex-direction: column-reverse;
O‘zingiz sinab ko‘ring »

flex-flow xususiyati

flex-flow xususiyati flex-direction va flex-wrap uchun qisqa yozuvdir.

Misol

flex-flow: row wrap;
O‘zingiz sinab ko‘ring »

justify-content’ning boshqa qiymatlari

Qiymat Tavsif
flex-start Elementlar boshiga joylashtiriladi
flex-end Elementlar oxiriga joylashtiriladi
center Elementlar markazga joylashtiriladi
space-between Elementlar orasiga bo‘shliq qo‘yiladi
space-around Elementlar atrofiga bo‘shliq qo‘yiladi
space-evenly Elementlar atrofiga teng bo‘shliq qo‘yiladi

align-items’ning boshqa qiymatlari

Qiymat Tavsif
stretch Elementlar konteynerni to‘ldirish uchun cho‘ziladi
flex-start Elementlar boshida tekislanadi
flex-end Elementlar oxirida tekislanadi
center Elementlar markazga joylashtiriladi
baseline Elementlar matnining tayanch chizig‘i (baseline) bo‘yicha tekislanadi

CSS Flexbox xususiyatlari

w3-flex klassi CSS Flexbox konteynerini yaratadi.

So‘ngra standart CSS xususiyatlari yordamida konteyner va uning flex elementlarini boshqarish mumkin:

Xususiyat Tavsif
flex-direction Flex elementlar yo‘nalishini belgilaydi
flex-wrap Flex elementlar keyingi qatorga o‘ta olishini belgilaydi
flex-flow Yo‘nalish va keyingi qatorga o‘tishni belgilaydi
gap Flex elementlar orasidagi oraliqni belgilaydi
justify-content Elementlarni asosiy o‘q bo‘ylab tekislaydi
align-items Elementlarni ko‘ndalang o‘q bo‘ylab tekislaydi
align-content Flex elementlarning bir nechta qatorini tekislaydi
flex Flex element qanday kattalashishi, kichrayishi va qanday boshlang‘ich o‘lchamga ega bo‘lishini belgilaydi
flex-grow Element qanchalik kattalasha olishini belgilaydi
flex-shrink Element qanchalik kichraya olishini belgilaydi
flex-basis Elementning boshlang‘ich o‘lchamini belgilaydi
order Elementning vizual tartibini belgilaydi
align-self Bitta elementning tekislanishini belgilaydi

CSS Flexbox’ning to‘liq tavsifini CSS Flexbox darsligida ko‘ring.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish