Как работает Flex Wrap

Flex Wrap управляет поведением flex-элементов при переполнении контейнера. По умолчанию (nowrap) элементы сжимаются или выходят за границы. При wrap или wrap-reverse элементы переносятся на новую строку (или столбец, если flex-direction: column).

Пример:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item {
  flex: 1 1 200px; /* Минимальная ширина 200px */
}

Ключевые моменты:

• nowrap (по умолчанию) – все элементы в одну линию.
• wrap – перенос на новую строку при нехватке места.
• wrap-reverse – перенос в обратном порядке.
• Работает в связке с flex-direction (для колонок – перенос по вертикали).
• Учитывает min-width/min-height элементов при переносе.