Как прижать один flex-элемент к правому краю контейнера?

Flexbox распределяет свободное пространство между элементами вдоль главной оси. Чтобы прижать один конкретный элемент к правому краю, нужно «забрать» всё свободное место слева от него. Это делается через автоматический отступ.

Способ 1: margin-left: auto

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

.container {
  display: flex;
}
.item-right {
  margin-left: auto;
}

Способ 2: justify-content: space-between

Подходит, когда в контейнере ровно два элемента: первый уйдёт влево, второй — вправо.

.container {
  display: flex;
  justify-content: space-between;
}

Способ 3: flex-grow

Можно добавить пустой элемент-распорку с flex-grow: 1 перед нужным элементом. Он займёт всё свободное место и вытолкнет соседа вправо.

.spacer { flex-grow: 1; }

Что не сработает

• align-self: flex-end — работает по поперечной оси, а не по главной.
• float: right — во flex-контейнере игнорируется.

Итог: для прижатия одного элемента к правому краю во flex-контейнере удобнее всего использовать margin-left: auto — это лаконично и не требует изменения разметки.