Особенности свойства margin

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

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

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

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

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

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

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

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

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

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

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