Про флексбоксы можно говорить в двух терминах: первое это - ряд или колонка, второе - в терминах осей. С рядами и колонками мы уже разобрались, давайте теперь разберемся с осями. Понимание осей нужно для того, чтобы выравнивать элементы по горизонтали или по вертикали.
При работе с флекс элементами всегда существует
главная ось и поперечная. Мы можем элементы
выравнивать по главной оси и поперек
главной оси. Главная ось может иметь 4
направления: слева направо, справа налево,
сверху вниз и снизу вверх.
Направление поперечной оси зависит от направления главной: если главная ось горизонтальна, то поперечная направлена сверху вниз, если главная ось вертикальна, то поперечная направлена слева направо. Других направлений поперечная ось иметь не может.
Направление главной оси регулируется свойством
flex-direction. Если данное свойство
имеет значение row - главная ось направлена
слева направо, если же значение row-reverse,
то справа налево. Значение column
направляет ось сверху вниз, а значение column-reverse
- снизу вверх.
Пусть главная ось горизонтальна. Куда будет направлена поперечная ось?
Пусть главная ось вертикальна. Куда будет направлена поперечная ось?
Пусть поперечная ось направлена направо. Куда в таком случае может быть направлена главная ось?
Пусть поперечная ось направлена вниз. Куда в таком случае может быть направлена главная ось?
Может ли поперечная ось быть направлена справа налево?
Может ли поперечная ось быть направлена снизу вверх?
Пусть свойство flex-direction имеет
значение row. Куда будет направлена
главная ось? Куда будет направлена поперечная ось?
Пусть свойство flex-direction имеет
значение column. Куда будет направлена
главная ось? Куда будет направлена поперечная ось?
Пусть свойство flex-direction имеет
значение row-reverse. Куда будет направлена
главная ось? Куда будет направлена поперечная ось?
Пусть свойство flex-direction имеет
значение column-reverse. Куда будет
направлена главная ось? Куда будет направлена
поперечная ось?