Панель действий: перенос кнопок без горизонтального переполнения
Панель с несколькими действиями должна оставаться читаемой при узком окне и длинных подписях. Flex-wrap позволяет перенести целые кнопки на следующую строку, не меняя порядок документа.
Назначение
Панель с несколькими действиями должна оставаться читаемой при узком окне и длинных подписях. Flex-wrap позволяет перенести целые кнопки на следующую строку, не меняя порядок документа.
Как это работает
Контейнер задаёт flex и gap, а элементы сохраняют собственную область нажатия. Тексту кнопки разрешён перенос. Для демонстрационных действий используется type=button, чтобы случайно не отправить окружающую форму.
Пример
<style>.toolbar{display:flex;flex-wrap:wrap;gap:10px}.toolbar button{max-width:100%;padding:10px 14px;white-space:normal;overflow-wrap:anywhere;border:1px solid #11694e;border-radius:6px;background:white;color:#11694e}</style>
<div class="toolbar" role="group" aria-label="Действия с заметкой"><button type="button">Предпросмотр</button><button type="button">Сохранить учебную копию</button><button type="button">Закрыть</button></div>Что должно получиться
Кнопки располагаются в строку, пока места достаточно, затем переносятся. Пример демонстрирует только раскладку: обработчики действий не подключены и сохранение не происходит.
Граница применения и частая ошибка
Не уменьшайте подписи до нечитаемого размера ради одной строки. Визуальная перестановка через order может разойтись с последовательностью Tab. Role=toolbar требует дополнительной модели клавиатурного управления, поэтому простая группа здесь объявлена как group.
Самостоятельная проверка
Проверьте ширину около 320 CSS-пикселей и масштаб 200%. Добавьте длинную подпись и пройдите элементы клавишей Tab. Убедитесь, что кнопки не обрезаются и порядок остаётся понятным.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.