Автоматический отступ: действие у края flex-строки
Автоматический отступ у отдельного flex-элемента позволяет оттолкнуть его от остальных элементов строки.
Назначение
Автоматический отступ у отдельного flex-элемента позволяет оттолкнуть его от остальных элементов строки.
Как это работает
margin-inline-start:auto поглощает доступное свободное пространство на соответствующей стороне. Это удобно для кнопки справа в панели, когда слева остаётся группа элементов. При нехватке места нужна отдельная стратегия переноса.
Пример
<style>.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px solid}.toolbar button{margin-inline-start:auto;padding:8px 14px}</style>
<div class="toolbar"><span>Учебный документ</span><button type="button">Предпросмотр</button></div>Что должно получиться
Кнопка отнесена к концу строки, пока есть свободное место. Когда элементы переносятся, результат нужно оценивать по фактической ширине каждой flex-строки.
Граница применения и частая ошибка
Не считайте auto гарантией, что длинная строка всегда поместится. Добавьте перенос или адаптивное правило и проверьте локализованные длинные названия кнопок.
Самостоятельная проверка
Увеличьте длину подписи слева и сузьте контейнер. Проверьте направление rtl и убедитесь, что смысловой порядок действий остаётся понятным.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.