DEV Community

Miss_code_creaker
Miss_code_creaker

Posted on

2-qism Flexbox: flex-direction, flex-wrap, flex-flow va justify-content

●Flex direction - asosiy o'qning yo'nalishini belgilab beradi va flex items shu o'qga nisbatan joylashganligi uchun, ularning ham yo'nalishi belgilanadi.

Qiymatlari:

•row - elementlarimiz chapdan o'ngga qarab joylashadi.

•row-reverse - elementlarimiz o'ngdan chapga qarab joylashadi.

•column - elementlarimiz tepadan pastga qarab joylashadi.

•column-reverse - elementlarimiz pastdan telaga qarab joylashadi

●Flex wrap - odatda flex elementlarimiz bitta liniyada joylashadi lekin flex wrap yordamida bu holatni o'zgartirish mumkin.

Qiymatlari:

•nowrap - hamma flex elementlar bitta liniyada joylashadi.

•wrap - elementlar tepadan pastga bir necha liniyaga bo'linib joylashadi.

•wrap-reverse - elementlar pastdan tepaga bir necha liniyaga bo'linib joylashadi.

●Flex flow - flex-direction va flex-wrap xossalari uchun qisqartma hisoblanadi.

●Justify content - asosiy o'qi bo'ylab elementlarni joylashuvini belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi.

Qiymatlari:

•flex-start - elementlarimiz flex container boshida joylashadi.

•flex-end - elementlarimiz flex container oxirida joylashadi.

•center - elementlarimiz flex container markazida joylashadi

•space-between - elementlarimiz flex container bo'yicha teng taqsimlanadi. Birinchi elementimiz container boshida, oxirgi elementimiz esa container oxirida joylashadi.

•space-around - elementlarimiz flex container bo'yicha teng taqsimlanadi va har bir element atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirigi element va container chegarali orasidagi masofa boshqa masofadan farq qiladi.

•space-evenly - elementlarimiz flex container bo'yicha teng taqsimlanadi va har bir element atrofida teng masofa bo'ladi.

Top comments (0)