За что отвечает flex-wrap?

Свойство flex-wrap является частью модуля CSS Flexbox и контролирует поведение flex-элементов, когда их общий размер по главной оси превышает доступное пространство в flex-контейнере. Без управления переносом элементы могут бесконечно сжиматься или выходить за границы, что ломает вёрстку.

Значения свойства flex-wrap

• nowrap (значение по умолчанию): Все элементы выстраиваются в одну линию, даже если для этого им приходится сжиматься. Это может привести к переполнению контейнера или нечитаемому контенту.
• wrap: Элементы переносятся на следующую строку (или столбец, если направление — column), когда не хватает места. Перенос происходит в направлении, соответствующем направлению главной оси.
• wrap-reverse: Аналогично wrap, но перенос происходит в обратном направлении, то есть новые строки или столбцы добавляются "сверху" или "справа" (в зависимости от оси).

Практическое применение и пример

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

.container {
  display: flex;
  flex-wrap: wrap; /* Разрешаем перенос */
  gap: 10px;
}

.item {
  flex: 1 1 200px; /* Базовый размер 200px, может расти и сжиматься */
  min-height: 100px;
  background-color: lightblue;
}

В этом примере элементы внутри .container будут занимать минимум 200px по ширине. Если в строке не хватает места для следующего элемента, он автоматически переносится на новую строку благодаря flex-wrap: wrap. Свойство gap добавляет отступы между элементами.