Flexbox elementlari
CSS Flex elementlari
Flex konteynerning to‘g‘ridan-to‘g‘ri bola elementlari avtomatik ravishda flex elementlarga aylanadi.
Flex elementlar quyidagi xossalarga ega bo‘lishi mumkin:
order— flex konteyner ichida flex elementlarning ko‘rsatish tartibini belgilaydiflex-grow— flex elementning qolgan flex elementlarga nisbatan qancha o‘sishini belgilaydiflex-shrink— flex elementning qolgan flex elementlarga nisbatan qancha kichrayishini belgilaydiflex-basis— flex elementning boshlang‘ich uzunligini belgilaydiflex—flex-grow,flex-shrinkvaflex-basisuchun qisqartma xossasialign-self— flex konteyner ichida flex element uchun tekislashni belgilaydi
CSS order xossasi
order xossasi flex konteyner ichida flex elementlarning ko‘rsatish tartibini belgilaydi.
Manba koddagi birinchi flex element maketda birinchi element sifatida ko‘rinishi shart emas.
order qiymati son bo‘lishi kerak, standart qiymat 0.
Misol
order qiymati flex elementlarning ko‘rsatish tartibini belgilaydi:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Natija:
CSS flex-grow xossasi
flex-grow xossasi flex elementning qolgan flex elementlarga nisbatan qancha o‘sishini belgilaydi.
Qiymat raqam bo‘lishi kerak, standart qiymati 0.
Misol
Uchinchi flex elementni qolgan flex elementlardan to‘rt baravar tez o‘sishiga erishing:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
4">3</div>
</div>
Natija:
CSS flex-shrink xossasi
flex-shrink xossasi flex elementning qolgan flex elementlarga nisbatan qancha kichrayishini belgilaydi.
Qiymat raqam bo‘lishi kerak, standart qiymati 1.
Misol
Uchinchi flex elementni qolgan flex elementlardan ikki baravar ko‘p kichrayishingiz mumkin:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Natija:
CSS flex-basis xossasi
flex-basis xossasi flex elementning boshlang‘ich uzunligini belgilaydi.
Misol
Uchinchi flex elementning boshlang‘ich uzunligini 250 pikselga belgilash:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div>
Natija:
CSS flex xossasi
flex xossasi flex-growflex-shrinkflex-basis
Misol
Uchinchi flex elementni o‘suvchan (1), kichrayuvchan emas (0) qilib, boshlang‘ich uzunligi 150 piksel bo‘lishini belgilang:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
1 0 150px">3</div>
<div>4</div>
</div>
CSS align-self xossasi
align-self xossasi moslashuvchan konteyner ichida tanlangan element uchun tekislashni belgilaydi.
Bu xossa konteynerning align-items xossasi bilan belgilangan standart tekislashni almashtiradi.
Bu misollarda align-self xossasini yaxshiroq ko‘rsatish uchun 200 piksel balandlikdagi konteynerdan foydalanamiz:
Misol
Uchinchi flex elementni konteyner o‘rtasida tekislash:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Natija:
Misol
Ikkinchi flex elementni konteyner yuqori qismida, uchinchi flex elementni konteyner pastki qismida tekislash:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Natija:
CSS flex elementlari xossalari
Quyidagi jadval barcha CSS Flex elementlari xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| align-self | Moslashuvchan element uchun tekislashni belgilaydi (moslashuvchan konteynerning align-elementlar xususiyatini bekor qiladi) |
| flex | Flex-o‘sish, flex-shrink va flex-basis xususiyatlari uchun qisqartma xususiyat |
| flex-basis | Moslashuvchan elementning dastlabki uzunligini belgilaydi |
| flex-grow | Egiluvchan element konteyner ichidagi qolgan moslashuvchan elementlarga nisbatan qancha o‘sishini belgilaydi |
| flex-shrink | Egiluvchan element konteyner ichidagi qolgan moslashuvchan elementlarga nisbatan qanchalik qisqarishini belgilaydi |
| order | Idish ichidagi moslashuvchan elementlarning tartibini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!