Выравнивание элемента flexbox вправо

В процессе работы с веб-разметкой и стилизацией часто возникает необходимость выравнивания элемента по правому краю контейнера. Рассмотрим пример с использованием Flexbox модели.

Представим, что имеется горизонтальное меню с тремя пунктами: «Home», «Some title centered», «Contact». Цель — расположить пункт «Contact» по правому краю меню.

<div class="menu">
  <div class="item">Home</div>
  <div class="item">Some title centered</div>
  <div class="item">Contact</div>
</div>

.menu {
  display: flex;
}

.item {
  background: #efefef;
  border: 1px solid #999;
  padding: 10px;
}

Простое применение display: flex к контейнеру располагает все элементы слева направо. Однако, чтобы выровнять последний пункт «Contact» по правому краю, необходимо использовать дополнительные свойства Flexbox.

Одним из самых простых способов является использование свойства margin-left: auto для пункта «Contact». Это свойство «оттолкнет» пункт «Contact» от остальных элементов и выровняет его по правому краю.

.item:last-child {
  margin-left: auto;
}

Таким образом, вместо использования position: absolute и right: 0, можно использовать возможности Flexbox для выравнивания элементов. Это делает код более понятным, упрощает поддержку и делает верстку более гибкой.