Флексбокс, часть 1 / Главная ось, flex-direction [2/31]
×

Главная ось, flex-direction [2/31]

Вспомните, как ведёт себя обычный поток документа. Блоки и текст располагаются слева направо и сверху вниз.

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

Вместо направлений «лево» и «право» во флексбоксе используется понятие «главная ось». Поток флекс-элементов «течёт» вдоль главной оси от её начала к её концу.

Поток флекс-элементов «течёт» вдоль главной оси

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction, которое задаётся для флекс-контейнера. Значения свойства:

  • row — значение по умолчанию, главная ось направлена слево направо.

  • column — главная ось направлена сверху вниз.

  • row-reverse — главная ось направлена справа налево.

  • column-reverse — главная ось направлена снизу вверх.

Флекс-элементы всегда располагаются вдоль главной оси, независимо от её направления.

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

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Главная ось, flex-direction</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: row; }
HTML Academy

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

  1. справа налево,
  2. сверху вниз,
  3. а затем снизу вверх.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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