Css da flexBox asoslari

Bugungi maqolamda Css da juda keng qo'llaniladigan flexBox haqida o'z bilganlarim haqida dastlabki ma'lumotlarni yoritib o'taman.

Flexbox - float yoki position xossalari yordamisiz web sahifani moslashuvchan (flexible) qilishda yordam beradi. Soddaroq aytganda web sahifadagi elementlarni joylashuv o’rnini belgilab beradi.
Flexbox - 2 ta asosiy elementdan tashkil topadi.

flex-container

flex-item

1-rasm

Container - shunday elementki, u ozida cssning display xossasida flex qiymat saqlaydi.

.flex-container {

display: flex;

}

Items - container elementining ichidagi elemntlar bo’lib, ular bitta yoki bir nechta bo’lishi mumkin.

Asosiy va kesuvchi o’qlar(main axis, cross axis)

2-rasm

Asosiy o’q(main axis) - flex modelining asosiy o’qi bo’lib, bizning elementlarimiz shu o’qqa nisbatan joylashadi.
Asosiy o’q boshi/tugashi (main start/end) - container elementimizning boshi va oxrini belgilaydi. Flex elementlarimiz shu oraliqda joylashadi.
Asosiy o’q uzunligi(main size) - Asosiy o’q o’lchamiga qarab flex elemntlarimizning uzunligi yoki balandligi belgilanadi.
Kesuvchi o’q(cross axis) - Asosiy o’qqa nisbatan perpendikulyar joylashadi. Asosy o’qqa qarab yo’nalish oladi.
Kesuvchi o’q boshi/tugashi (cross start/end) - flex elemtlarimiz vertikal yo’nalishda shu o’qlar orasida joylashadi.
Kesuvchi o’q uzunligi(cross size) - Elementlarning balandligini(heigt)ni anglatadi.

Ushbu maqola Css da flexBox asoslari nomli mavzuyimizning dastlabkisi hisoblanadi, qolgan tushunchalar haqida keyingi maqolada albatta tanishamiz.