Flexbox - float yoki position xossalari yordamisiz veb sahifada moslashuvchan (flexible) layout(bu html sahifasida elementlarni joylashuvi) yaratishda yordam beradi. Boshqacha qilib aytganda, veb sahifadagi elementlarni joylashtirish uchun xizmat qiladi. Flexbox 2 asosiy elementlardan tashkil topgan:
1.Flex container - display xossasi uchun flex qiymatiga ega bo'lgan elementga aytiladi.
2.Flex items - veb sahifamizdagi flex container ota-onaga ega bo'lgan elementlar.
Asosiy o'q (main axis) - flex modelning asosiy o'qi hisoblanadi va elementlarimiz shu o'qga nisbatan joylashadi. Gorizontal ko'rinishdan vertikal ko'rinishga ham o'tkazsa bo'ladi.
Asosiy boshi/tugashi(main start/end)-flex elementlarimiz asosiy boshi va tugashi orasida joylashadi.
Asosiy uzunligi (main size) - asosiy o'qga qarab flex elementlarimizning kengligi yoki balandligi asosiy uzunlik hisoblanadi. Asosiy o'qning o'lchoviga qarab kenglik yoki balandlik asosiy o'qning uzunligi etib belgilaydi.
Kesuvchi boshi/tugashi (cross start/end) - flex liniyalarimiz kesuvchi boshi va tugashi orasida joylashadi.
Kesuvchi o'q (cross axis) - asosiy o'qga perpendikulyar o'q hisoblanadi. Uning yo'nalishi asosiy o'qning yo'nalishiga bog'liq bo'ladi.
Kesuvchi uzunligi (cross size) - kesuvchi o'qga qarab flex elementning kengligi yoki balandligi kesuvchi uzunlik hisoblanadi. Kesuvchi o'qning o'lchoviga qarab kenglik yoki balandlik kesuvchi uzunligi etib belgilanadi.
Flexbox uchun ishlatilinadigan CSS xossalarimiz 2 guruhga bo'linadi:flex container va flex items xossalari
● Flex container
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
● Flex items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
Top comments (0)