Как выровнять отдельный flex-элемент иначе, чем остальные?

Flexbox выравнивает элементы по двум осям: главной (main axis) и поперечной (cross axis). Свойство align-items на контейнере задаёт выравнивание всех дочерних элементов по поперечной оси. Но иногда нужно, чтобы один элемент выравнивался иначе, чем остальные. Для этого у самого элемента есть свойство align-self, которое переопределяет align-items родителя только для этого элемента.

Свойство align-self

Оно принимает те же значения, что и align-items: flex-start, flex-end, center, baseline, stretch. Значение auto (по умолчанию) означает наследование от родителя.

.container {
  display: flex;
  align-items: center; /* все по центру */
  height: 200px;
}
.item-special {
  align-self: flex-end; /* только этот — вниз */
}

Выравнивание через margin: auto

Если задать элементу margin: auto по нужной оси, он «съест» всё свободное пространство и прижмётся к противоположной стороне. Это работает и по главной оси, где align-self не действует.

.container {
  display: flex;
}
.item-right {
  margin-left: auto; /* прижмёт элемент вправо */
}

Где применяется

• Кнопка «Войти» справа в навбаре, остальные ссылки слева.
• Иконка, прижатая к низу карточки, при центрированных остальных элементах.
• Разделение элементов на группы без дополнительных обёрток.

Итог: для выравнивания одного элемента по поперечной оси используйте align-self, а для смещения по главной оси или отталкивания к краю — margin: auto. Эти приёмы позволяют точечно управлять раскладкой, не меняя поведение всего контейнера.