SmartQuery /ВОПРОС → ПРИМЕР → ПОНЯТНЫЙ ОТВЕТ
Веб-разработка

Flexbox: прижать группу к концу строки

Для обычной строки flex-direction:row с направлением LTR justify-content:flex-end прижмёт всю группу вправо. Если направление или ось меняются, «конец» может оказаться в другом месте.

Вся группа

<div class="actions">
  <button>Отмена</button>
  <button>Сохранить</button>
</div>
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

Только последний элемент

Если первые элементы должны остаться в начале, добавьте последнему элементу class="last" и задайте margin-inline-start:auto. Свободное пространство займёт автоматический отступ.

.actions .last {
  margin-inline-start: auto;
}

Почему не работает

  • Контейнер может не иметь свободной ширины для распределения.
  • justify-content действует по главной оси; при column это вертикальное направление.
  • Растянутые flex-элементы могут уже занять свободное место.
  • Проверьте row-reverse и dir=rtl, если нужен именно физический правый край.

Проверьте узкую ширину, длинную подпись и порядок фокуса. Не переставляйте DOM только ради выравнивания, если это ломает логичный порядок кнопок для клавиатуры и screen reader.

Документация