Свойство flex-wrap: перенос элементов
Как разрешить кнопкам и меткам переходить на следующую строку.
Как это работает
flex-wrap управляет появлением нескольких строк или колонок внутри flex-контейнера. Начальное nowrap пытается разместить элементы в одной линии, используя правила сжатия. Значение wrap позволяет создать новые линии, когда места недостаточно.
Перенос особенно удобен для тегов, фильтров и небольших кнопок. Расстояние между ними задавайте gap. При нескольких линиях align-items выравнивает элементы внутри линии, а align-content управляет самими линиями при наличии свободного пространства.
Пример в интерфейсе
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { padding: 8px 12px; background: #eaf4ee; border-radius: 20px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| nowrap | Одна линия. |
| wrap | Разрешение нескольких линий. |
| wrap-reverse | Обратное направление размещения линий. |
На что обратить внимание
Flexbox не гарантирует одинаковые вертикальные колонки между разными строками. Если требуется строгая сетка по двум осям, лучше рассмотреть Grid.
Проверьте на практике
Добавьте ещё три метки и уменьшайте ширину контейнера. Текст метки не должен обрезаться, а расстояние между рядами должно оставаться удобным.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.