DEV Community

Miss_code_creaker
Miss_code_creaker

Posted on

3-qism Flexbox: align-items va align-content

●Align items - kesuvchi o'qi (cross axis) bo'ylab elementlarni joylashuvini belgilaydi.

Qiymatlari:

•stretch - elementlarimiz "flex container"ni to'ldirish uchun cho'ziladi.

•center - elementlarimiz kesuvchi o'qning markazida joylashadi.

•flex-start - elementlarimiz kesuvchi o'qning boshida joylashadi.

•flex-end - elementlarimiz kesuvchi o'qning oxirida joylashadi.

●Align content - kesuvchi o'q (cross axis) bo'ylab flex container liniyalarni joylashuvini belgilaydi va qo'shimcha bo'sh joyni taqsimlashga yordam beradi.

Qiymatlari:

•stretch - flex liniyalarimiz containerni to'ldirish uchun cho'ziladi.

•flex-start - flex liniyalarimiz container boshida joylashadi.

•flex-end - flex liniyalarimiz container oxirida joylashadi.

•center - flex liniyalarimiz container markazida joylashadi.

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

•space-around - flex liniyalarimiz container bo'yicha teng taqsimlanadi va har bir liniya atrofida teng masofa bo'ladi. Faqatgina birinchi, oxirgi liniya va container chegarali orasidagi masofa boshqa masofalardan farq qiladi.

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

Top comments (0)