Флексбокс, часть 2 / Особенности свойства margin [2/28]
×

Особенности свойства margin [2/28]

В предыдущем задании мы не упомянули про свойство margin, ведь оно таит много сюрпризов:

  • внешние отступы не схлопываются, ни по горизонтали, ни по вертикали;

  • внешние отступы не выпадают, ни из флекс-контейнера, ни из флекс-элементов;

  • значение auto получило премию журнала Форбс в номинации «Самое влиятельное значение CSS-свойства внутри флекс-контейнера».

Всё дело в механизме распределения свободного места. Если внутри флекс-контейнера есть свободное место, то оно перераспределяется так:

  1. находятся элементы, у которых есть внешние отступы со значением auto;

  2. всё свободное место в соответствующих направлениях отдаётся таким отступам (то есть задаётся определённый размер отступа в пикселях);

  3. если элементов с автоматическими отступами на одном направлении несколько, то место между ними перераспределяется поровну;

  4. только после этого запускаются механизмы выравнивания.

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

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


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Особенности свойства margin</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 class="skate skate-4 racoon-gray"></div> </div> </body> </html>
.spot { display: flex; justify-content: flex-start; align-items: center; } .skate { min-width: 40px; min-height: 100px; margin: 0; } .skate-2 { } .skate-4 { }
HTML Academy
  1. Задайте скейтбордам .skate внешние отступы со всех сторон 10px.
  2. Затем задайте margin-left: auto; второму скейту,
  3. а потом margin-right: auto; четвёртому скейту.
  4. Напоследок измените у .spot распределение по главной оси на flex-end

    и убедитесь, что ничего не изменилось

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

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

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

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

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