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