Как работает flex-wrap и когда его использовать?

`flex-wrap` определяет, помещаются ли элементы в одну строку или переносятся на новые.

Значения

• nowrap (по умолчанию) — одна строка, элементы сжимаются.
• wrap — переносятся на следующую строку.
• wrap-reverse — переносятся вверх.

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Теги или кнопки укладываются в несколько строк, когда не помещаются в ширину.

Особенности

• Сокращение: flex-flow: row wrap.
• При переносе у каждой строки своя отдельная распределённая длина: justify-content действует внутри каждой строки.
• Для ровных колонок с переносом иногда лучше Grid, потому что Flexbox не выравнивает элементы последней строки по колонкам предыдущих.

Коротко для собеседования

flex-wrap: wrap позволяет переносить элементы на новые строки. Для выровненной сетки лучше подойдёт Grid.