Для чего нужен Flex wrap

Flex wrap определяет, будут ли flex-элементы переноситься на новую строку (или столбец), если не хватает места в контейнере.

Значения:

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

Пример:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Когда использовать:

• Если нужно адаптивное расположение элементов без жесткой фиксации ширины.
• Для гридов с динамическим количеством элементов.
• В мобильных интерфейсах, где важно сохранять читаемость.