# Главная и поперечная оси в флекс блоках в CSS

Про флексбоксы можно говорить в двух терминах: первое это - ряд или колонка, второе - в терминах осей. С рядами и колонками мы уже разобрались, давайте теперь разберемся с осями. Понимание осей нужно для того, чтобы выравнивать элементы по горизонтали или по вертикали.

При работе с флекс элементами всегда существует главная ось и поперечная. Мы можем элементы выравнивать по главной оси и поперек главной оси. Главная ось может иметь `4` направления: слева направо, справа налево, сверху вниз и снизу вверх.

Направление поперечной оси зависит от направления главной: если главная ось горизонтальна, то поперечная направлена сверху вниз, если главная ось вертикальна, то поперечная направлена слева направо. Других направлений поперечная ось иметь не может.

Направление главной оси регулируется свойством `flex-direction`. Если данное свойство имеет значение `row` - главная ось направлена слева направо, если же значение `row-reverse`, то справа налево. Значение `column` направляет ось сверху вниз, а значение `column-reverse` - снизу вверх.

Пусть главная ось горизонтальна. Куда будет направлена поперечная ось?

Пусть главная ось вертикальна. Куда будет направлена поперечная ось?

Пусть поперечная ось направлена направо. Куда в таком случае может быть направлена главная ось?

Пусть поперечная ось направлена вниз. Куда в таком случае может быть направлена главная ось?

Может ли поперечная ось быть направлена справа налево?

Может ли поперечная ось быть направлена снизу вверх?

Пусть свойство `flex-direction` имеет значение `row`. Куда будет направлена главная ось? Куда будет направлена поперечная ось?

Пусть свойство `flex-direction` имеет значение `column`. Куда будет направлена главная ось? Куда будет направлена поперечная ось?

Пусть свойство `flex-direction` имеет значение `row-reverse`. Куда будет направлена главная ось? Куда будет направлена поперечная ось?

Пусть свойство `flex-direction` имеет значение `column-reverse`. Куда будет направлена главная ось? Куда будет направлена поперечная ось?

← →
↑