Как выровнять элемент (например, кнопку) по правому краю контейнера?

Выравнивание элемента по правому краю — частая задача при вёрстке: кнопки в шапке, иконки в карточках, элементы навигации. В современном CSS есть несколько подходов, и выбор зависит от контекста и типа элемента.

Flexbox — основной способ

Если родитель — flex-контейнер, достаточно задать justify-content: flex-end. Это выровняет все дочерние элементы по правому краю главной оси.

.container {
  display: flex;
  justify-content: flex-end;
}

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

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

Inline-элементы и text-align

Для строчных элементов (кнопка, ссылка, span) можно задать родителю text-align: right. Это работает и без flexbox, но не подходит для блочных элементов.

.container { text-align: right; }

Абсолютное позиционирование

Метод position: absolute; right: 0 вырывает элемент из потока и требует position: relative у родителя. Используйте его, когда элемент должен «плавать» поверх контента.

.container { position: relative; }
.button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

Grid

В CSS Grid можно использовать justify-self: end для конкретного элемента внутри ячейки.

Итог: для большинства случаев выбирайте flexbox с justify-content: flex-end или margin-left: auto — это гибко, предсказуемо и не ломает поток документа. Абсолютное позиционирование применяйте только при необходимости наложения.