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

Выравнивание и внешние отступы [3/28]

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

Автоматический margin влияет и на выравнивание флекс-элементов вдоль поперечной оси.

Если у флекс-элемента отступ сверху или снизу автоматический, то на него не влияют, ни align-items, ни align-self. Такой элемент прижмётся либо к верху контейнера, либо к низу.

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


Выполнить задание
<!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: center; } .skate { min-width: 50px; min-height: 50px; margin: 10px; } .skate-2 { } .skate-3 { }
HTML Academy
  1. Измените у .spot выравнивание флекс-элементов вдоль поперечной оси на stretch.
  2. Затем задайте margin-top: auto; второму скейту.
  3. Третьему скейту сначала задайте собственное выравнивание в конце поперечной оси,
  4. а потом задайте margin-bottom: auto;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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