📖 Выравнивание последнего элемента по правому краю с помощью flexbox

Сегодня хочу порекомендовать короткую, но очень полезную статью о флексбоксах How to Align Last Flex Item to Right.

Довольно часто необходимо сверстать UI, в котором все элементы выровнены слева, и только один необходимо выравнять по правому краю.

Раньше я делал так:

• Создавал 2 div’а-обёртки
• Всё что должно быть слева клал в левый div
• Элемент, который должен быть справа, клал в правый div
• К родительскому элементу применял justify-content: space-between

Это решение всегда работает, но можно обойтись и без div’ов-обёрток. Всё, что нужно сделать — применить margin-left: auto к элементу, который должен располагаться справа.

Вот простой пример разметки из трех элементов и соответствующий CSS-код, где последний элемент выравнивается по правому краю.

HTML разметка:

<div class="flex-container">
  <div class="flex-item">Первый элемент</div>
  <div class="flex-item">Второй элемент</div>
  <div class="flex-item align-right">Последний элемент</div>
</div>

CSS код:

.flex-container {
    display: flex;
}
 
.flex-item {
    border: 1px solid black;
}
 
.align-right {
    margin-left: auto;
}

💡 Пояснение Дело в том, что всё свободное пространство будет распределено между auto-маржинами. Подробнее можно почитать в спеке флексбоксов Aligning with auto margins.