Флексбокс «на пальцах». Четвёртая часть: автоматические маржины

Флексбокс «на пальцах»

В выравнивании элементов внутри флекс‑контейнера есть магический трюк — автоматические маржины. Если задать элементу маржин со значением auto, то элемент прижмётся к противоположной стороне:

Флексбокс «на пальцах»

.cols > :last-child {
  margin-left: auto;
}

Работает и для поперечной оси:

.rows > :last-child {
  margin-top: auto;
  margin-left: auto;
}

Все последующие элементы также сдвигаются:

.cols > :nth-child(4) {
  margin-left: auto;
}

Чаще всего автоматические маржины используют в шапках, где нужно «оттеснить» часть элементов к правому краю, или при расстановке элементов по углам:

.tag {
  display: flex;
}

.tag-caption {
  margin-top: auto;
  margin-left: auto;
}

Управление проектом304 совета

Почему auto

CSS — margin: auto — How it works

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

CSS — margin: auto — How it works

В случае с флексбоксом это значение будет равно ширине оставшего свободного места. Чем‑то похоже на width: auto: если задать его таблице, она не станет растягиваться на всю доступную ширину, а займёт ровно столько, сколько нужно её содержимому. А здесь margin-left: auto займёт ровно столько места, сколько нужно, чтобы заполнить контейнер целиком.

Покажу на примере. Если ширина контейнера 250 пикселей, в нём 3 элемента шириной 50 пикселей, то margin-left: auto превратится в margin-left: 100px (250 − 3×50) и сдвинет элемент вправо.

margin‑left: auto

margin‑left: 100px

Если добавится автоматический маржин в противоположном направлении, то они поделят свободное место: margin-left: auto превратится в margin-left: 50px ((250 − 3×50) / 2), а margin-right: auto в margin-right: 50px. Элемент отцентруется: