Флексбокс, часть 1 / Поперечная ось [3/31]
×

Поперечная ось [3/31]

Вместо направлений «верх» и «низ» во флексбоксе используется понятие «поперечная ось». Вдоль этой оси рассчитывается высота элементов и работают «вертикальные» выравнивания.

Поперечная ось во флексбоксе

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

  • Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
  • Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Это не совсем логичное поведение, к которому надо привыкнуть. Получается, что поперечная ось никогда не смотрит вверх или влево. А свойства для поворота поперечной оси нет.

Давайте посмотрим на поведение поперечной оси вживую.

Мы добавили в мини-браузер индикатор поперечной оси. Теперь вы всегда будете знать, куда она направлена.

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Поперечная ось</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"></div> <div class="rug keks"></div> </div> </body> </html>
.room { display: flex; flex-direction: column-reverse; }
HTML Academy

Для блока .room задайте ещё раз направление главной оси:

  1. сверху вниз,
  2. справа налево,
  3. а затем слева направо.

Обращайте внимание на направление поперечной оси.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.