|
Cssda float va position xususiyatlaridan foydalanilmagan holda elementlarni
|
| Sana | 01.03.2024 | | Hajmi | 1.86 Mb. | | #164966 |
Bog'liq flexxbox протокола дарс, Олий нерв фаолияти типларини аниқлаш, темпирамент ррт, Yortgichlarni nazorat qiluvchi jihozlar, MUSTAQIL ISH, bexruz w, hisobot, Jasmina-3, O`ktam-2, 9-kimyo-savollar-uzb, kursssss, 1. Fure diskret almashtirishi haqida tushuntirish bering, mZf2WD4VUD5xj5sKddPfbigueX8ux114jXDtm17Q, 1 Topshiriq RUZIYEV BEKZOD Hayot faoliyati xavfsizligi, zoyirjon normatov turarjoy 231207 180446
FlexBox
CSSda float va position xususiyatlaridan foydalanilmagan holda elementlarni
joylashtirishning oson usulini beruvchi texnologiya bu FlexBox dir.
U ikki qismdan iborat: flex container va flex items.
Flex Container
Flex kontener bu o'ziga display: flex; xususiyatini olgan element bo'lib
ichki elementlarni joylashuvini belgilash xususiyatiga egadir.
.container {
display: flex; }
Uning xususiyatlari mavjud:
1. flex-direction - yunalishni belgilash.
Qiymatlari:
row - chapdan o'nga qarab qator bo'lab
row-reverse - ongdan chapga qarab qator bo'ylab
column - yuqoridan pastga qarab ustun bo'yicha
column-reverse - pasdan yuqoriga qarab ustun bo'yicha.
2. flex-wrap - bir qatorga sig'maganlarni
yangi qatorga tushirishni boshqarish
Qiymatlari:
wrap - yangi qatordan tushirish
nowrap - tushirmaslik
wrap-reverse - tomonni teskari qilish
3. justify-content - elemetlarni tekislash
Qiymatlari:
flex-start - boshidan(asosiy)
center - markazdan
flex-end - oxiridan
space-between - ikki chekka elementlar chegaralarda o'rtadagilari
esa masofani teng saqlagan holatda
space-around - elementlarning boshi va oxiridan teng masofalar
space-evenly - elementlar orasida bir xil masofa.
4. align-items - Bu xususiyat justify-content ga teskari
yunalishda ishlaydi ya'nu gorizontal ishlaganda bu vertikaliga
ishlaydi va teskarisi.
Qiymatlari:
flex-start, center, flex-end
5. flex-flow - bu flex-direction va flex-wrap ni bir qatorda
berish uchun ishlatiladi.
Misol:
flex-flow: row wrap;
6. align-content - align-items ga uxshaydi ammo qatorlar ko'p
bo'lganda ularni bir joyga yig'ib turadi.
Flex item
Flex Container ichidagi elementlar Flex items deyiladi va
ular uchun quidagi xususiyatlar mavjud
1. order - elementlar tartibini o'zgartirish
Qiymati tartib raqam.
Misol:
order: 2
2. flex-grow - kenglikni elementlar orasida nisbatda bo'lish.
Qiymati nisbat sonlar;
Misol:
flex-grow: 2;
Agar bir qatordagi elementlarga bir xil flex-grow berilsa
ular teng taqsimlanadi.
3. flex-shrink - Container o'lchami o'zgarganda biror elementlarga
siqilmaslik uchun ustunlik berish.
Qiymati:
1 - siqilish
0 - siqilmaslik
4. flex-basis - elementlarga dastlabki ulchamni berish.
Qiymati: px, foiz va h.k.
Misol:
flex-basis: 200px;
5. flex - 3 xususiyat flex-grow, flex-shrink va flex-basis
ni bitta qatorda berish.
Misol:
flex: 1 1 200px;
6. align-self - Containerning align-items xususiyatini tayin
bitta elementga berish.
align-self: center;
|
| |
