Справочник CSS

flex-wrap: перенос элементов Flexbox

По умолчанию flex-контейнер старается удержать все элементы на одной строке. flex-wrap: wrap разрешает перенос, когда места становится недостаточно.

Рабочий пример

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag { flex: 0 1 auto; }

Перенос создаёт несколько flex-линий. Расстояние между строками можно задавать gap, а распределение самих линий при наличии лишней высоты — через align-content.

Когда применять

wrap подходит для тегов, кнопок фильтра и карточек с разумной базовой шириной. Для строгой двумерной сетки с колонками зачастую понятнее CSS Grid.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Забывать ограничить ширину длинного текста
• Использовать wrap-reverse без причины
• Пытаться управлять линиями через align-items вместо align-content