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

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

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

.cols > :last-child {
  margin-left: auto;
}
1
2
3
4
5

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

.rows > :last-child {
  margin-top: auto;
  margin-left: auto;
}
1
2
3
4
5

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

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

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

.tag {
  display: flex;
}

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

Почему auto

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

В случае с флексбоксом это значение будет равно ширине оставшего свободного места. Чем‑то похоже на 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. Элемент отцентруется:

margin‑left: auto; margin‑right: auto

 
 
 

margin‑left: 50px; margin‑right: 50px

 
 
 
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы