Асосӣ ва уфуқӣ меҳварҳо дар флекс блокҳо дар CSS

Дар бораи флексбоксҳо метавон бо ду истилоҳ сухан гуфт: якум - сатр ё сутун, дуюм - аз рӯи меҳварҳо. Бо сатрҳо ва сутунҳо мо аллакай фаҳмидем, биёед акнун меҳварҳоро фаҳмем. Фаҳмидани меҳварҳо барои ҳамвор кардани унсурҳо аз рӯи уфуқӣ ё амудӣ лозим аст.

Ҳангоми кор бо флекс унсурҳо ҳамеша меҳвари асосӣ ва уфуқӣ мавҷуданд. Мо метавонем унсурҳоро аз рӯи меҳвари асосӣ ва баробари меҳвари асосӣ ҳамвор кунем. Меҳвари асосӣ метавонад 4 самт дошта бошад: аз чап ба рост, аз рост ба чап, аз боло ба поён ва аз поён ба боло.

Самти меҳвари уфуқӣ вобаста ба самти асосӣ аст: агар меҳвари асосӣ уфуқӣ бошад, пас меҳвари уфуқӣ аз боло ба поён самт дорад, агар меҳвари асосӣ амудӣ бошад, пас меҳвари уфуқӣ аз чап ба рост самт дорад. Меҳвари уфуқӣ наметавонад самтҳои дигар дошта бошад.

Самти меҳвари асосӣ бо хосияти flex-direction танзим карда мешавад. Агар ин хосият қимати row дошта бошад - меҳвари асосӣ аз чап ба рост самт дорад, аммо агар қимати row-reverse бошад, пас аз рост ба чап. Қимати column меҳварро аз боло ба поён самт медиҳад, ва қимати column-reverse - аз поён ба боло.