Про флексбокси можна говорити у двох термінах: перше це - ряд чи колонка, друге - у термінах осей. З рядами та колонками ми вже розібралися, давайте тепер розберемося з осями. Розуміння осей потрібне для того, щоб вирівнювати елементи по горизонталі або по вертикалі.
Працюючи з флекс елементами завжди існує
головна вісь та поперечна. Ми можемо елементи
вирівнювати по головній осі та поперек
головної осі. Головна вісь може мати 4
напрямки: зліва направо, праворуч наліво,
зверху вниз та знизу вгору.
Напрямки поперечної осі залежить від напрямку головного: якщо головна вісь горизонтальна, то поперечна спрямована зверху вниз, якщо головна вісь вертикальна, то поперечна направлена зліва направо. Інших напрямків поперечна вісь мати не може.
Напрямок головної осі регулюється властивістю
flex-direction. Якщо ця властивість
має значення row - головна вісь спрямована
зліва направо, якщо значення row-reverse,
то справа наліво. Значення column
направляє ось зверху вниз, а значення column-reverse
- знизу вгору.
Нехай головна вісь горизонтальна. Куди буде спрямована поперечна вісь?
Нехай головна вісь вертикальна. Куди буде спрямована поперечна вісь?
Нехай поперечна вісь спрямована праворуч. Куди у такому разі може бути направлена головна вісь?
Нехай поперечна вісь спрямована вниз. Куди у такому разі може бути спрямована головна вісь?
Чи може поперечна вісь бути направлена справа наліво?
Чи може поперечна вісь бути спрямована знизу вгору?
Нехай властивість flex-direction має
значення row. Куди буде спрямована
головна вісь? Куди буде спрямована поперечна вісь?
Нехай властивість flex-direction має
значення column. Куди буде спрямована
головна вісь? Куди буде спрямована поперечна вісь?
Нехай властивість flex-direction має
значення row-reverse. Куди буде спрямована
головна вісь? Куди буде спрямована поперечна вісь?
Нехай властивість flex-direction має
значення column-reverse. Куди буде спрямована
головна вісь? Куди буде спрямована поперечна вісь?