CSS-тегі флекс блоктарындағы негізгі және қиылысатын осьтер

Флексбокстар туралы екі терминмен айтуға болады: біріншісі - қатар немесе баған, екіншісі - осьтер терминінде. Біз қатарлар мен бағандармен қазірдің өзінде таныстық, енді осьтермен танысайық. Элементтерді көлденең немесе тік бағытта туралау үшін осьтерді түсіну қажет.

Флекс элементтерімен жұмыс істеу кезінде әрқашан негізгі ось және қиылысатын ось болады. Біз элементтерді негізгі ось бойынша және негізгі оське қиылыса туралай аламыз. Негізгі ось 4 бағытта болуы мүмкін: солдан оңға қарай, оңнан солға қарай, жоғарыдан төмен қарай және төменнен жоғары қарай.

Қиылысатын осьтің бағыты негізгі осьтің бағытына байланысты: егер негізгі ось көлденең болса, онда қиылысатын ось жоғарыдан төмен қарай бағытталған, егер негізгі ось тік болса, онда қиылысатын ось солдан оңға қарай бағытталған. Қиылысатын осьтің басқа бағыттары болуы мүмкін емес.

Негізгі осьтің бағыты flex-direction сипаттамасымен реттеледі. Егер бұл сипаттаманың мәні row болса - негізгі ось солдан оңға қарай бағытталған, ал егер мәні row-reverse болса, онда оңнан солға қарай. column мәні осьті жоғарыдан төмен қарай бағыттайды, ал column-reverse мәні - төменнен жоғары қарай.