Флексбокс, часть 2 / Направление главной оси и внешние отступы [4/28]
×

Направление главной оси и внешние отступы [4/28]

Будет ли результат таким, как на картинке снизу, если повернуть главную ось в предыдущем задании?

До После

Нет, не будет!

Дело в том, что «старые нефлексовые» свойства, такие как отступы или размеры, ничего не знают про направление осей. Они «мыслят по-старому», понятиями «верх» и «низ», «право» и «лево».

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

То же относится и к вертикальным отступам.

Давайте повернём ось, а затем внесём правки и получим результат, как на картинке выше.

На момент написания курса в Safari и других WebKit-браузерах есть баг, из-за которого блоки могут позиционироваться некорректно.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Направление главной оси и внешние отступы</title> <base href="/assets/course113/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="world"> <div class="spot"> <div class="skate skate-1 racoon-green"></div> <div class="skate skate-2 racoon-brown"></div> <div class="skate skate-3 racoon-orange"></div> </div> </body> </html>
.spot { display: flex; justify-content: space-around; align-items: stretch; } .skate { min-width: 50px; min-height: 50px; margin: 10px; } .skate-2 { margin-top: auto; } .skate-3 { margin-bottom: auto; align-self: flex-end; }
HTML Academy
  1. Измените у .spot направление главной оси на column.
  2. Затем у второго скейта удалите свойство margin-top и добавьте свойство margin-left: auto;.
  3. У третьего скейта удалите свойство margin-bottom и добавьте свойство margin-right: auto;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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