Flex haqida umumiy tushuncha

Flex haqida umumiy tushuncha
"Flex-direction" - bu asosiy o'qning yo'nalishini belgilab beradi
Qiymatlari :
1. "row" (default) - elementlarni chapdan o'nga qarab joylashtiradi.
2. "row-reverse" - elementlarni o'ngdan chapga qarab joylashtiradi.
3. "column" - elementlarni tepadan pastga qarab joylashtiradi.
4. "column-reverse" - elementlarni pastdan tepaga qarab joylashtiradi.
"Flex-wrap" - odatda flex elementlarini bitta liniyada joylashadi lekin
flex-wrap yordamida bu holatni o'zgartirish mumkin.
Qiymatlari:
1. "nowrap" (default) - hamma flex elementlarimzi bitta liniyada joylashadi.
2. "wrap" - elementlar tepadan pastga bir necha liniyaga bo'linib joylashadi.
3. "wrap-reverse" - elementlar pastdan tepaga bir nechta liniyaga bo'linib joylashadi.
"Flex-flow" - bu direction va wrap qiymatlarini jamlash imkoni beradi.
Misol uchun : 1. flex-direction: row-reverse;
2. flex-wrap: wrap;
ushbu kodni bir qatorda yozish imkonini beradi, ya'ni dastlab,
direction va wrap qiymatlari beriladi:
3. flex-flew: row-reverse wrap;
"Justify content" - bu asosiy o'q bo'ylab elementlarni joylashuvini belgialydi
va qo'shimcha bo'sh joyni taqsimlashga yordam beradi.
Qiymatlari:
1. "flex-start" (default) - elementlarmiz flex conatiner boshida joylashadi.
2. "flex-end" - elementlarmiz flex conatiner oxirida joylashadi.
3. "center" - elementlarmiz flex conatiner markazida joylashadi.
4. "space-between" - elementlarmiz flex conatiner bo'yicha teng taqsimlanadi. Birinchi
elementimiz container boshida, oxirgi elementimiz container oxirida joylashadi.
5. "space-around" - elementlarmiz flex conatiner bo'yicha teng taqsimlandi va har bir element atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirgi element va container chegaralari orasidagi masofa boshqa masofalardan farq qiladi.
6. "space-evenly" - elementlarmiz flex conatiner bo'yicha teng taqsimlanadi va har bir element atrofida teng masofa bo'ladi.
"Align-items" - kesuvchi o'qi (cross axis) bo'ylab elementlarni joylashuni belgilaydi.
Qiymatlari:
1. "strech" (default) elementlarmiz "flex-container"ni to'ldirish uchun cho'ziladi.
2. "center" - elementlarmiz kesuvchi o'qni markazida joylashadi.
3. "flex-start" - elementlarmiz kesuvchi o'qni boshida joylashadi.
4. "flex-end" - elementlarmiz kesuvchi o'qni oxirida joylashadi.
"Align-content"
Qiymatlari:
1. "strech" (default) flex liniyalarimiz containerni to'ldirish uchun cho'ziladi.
2. "flex-start" (default) - flex liniyalarimiz conatiner boshida joylashadi.
3. "flex-end" - flex liniyalarimiz conatiner oxirida joylashadi.
4. "center" - flex liniyalarimiz conatiner markazida joylashadi.
5. "space-between" - flex liniyalarimiz conatiner bo'yicha teng taqsimlanadi. BIrinchi
liniyamiz container boshida, oxirgi liniyamiz container oxirida joylashadi.
6. "space-around" - flex liniyalarimiz conatiner bo'yicha teng taqsimlandi va har bir liniya
atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirgi liniya va container chegaralari
orasidagi masofa boshqa masofalardan farq qiladi.
7. "space-evenly" - flex liniyalarimiz conatiner bo'yicha teng taqsimlanadi va har bir liniya
atrofida teng masofa bo'ladi.