flex-wrap: перенос строк

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

Зачем нужно

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

Где используется

  • Сетки карточек (переносятся на следующую строку)
  • Список тегов или пилюль (badges)
  • Кнопочные группы, которые переносятся на мобильном

Значения

.container {
  display: flex;
  flex-wrap: nowrap;       /* по умолчанию — всё в одну строку */
  flex-wrap: wrap;         /* перенос слева направо, новые строки вниз */
  flex-wrap: wrap-reverse; /* перенос слева направо, новые строки вверх */
}

Примеры

Адаптивная сетка карточек

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 260px; /* минимум 260px, растёт до заполнения строки */
}

<div class="cards">
  <article class="card">Карточка 1</article>
  <article class="card">Карточка 2</article>
  <article class="card">Карточка 3</article>
  <article class="card">Карточка 4</article>
</div>

Список тегов

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #e2e8f0;
}

<div class="tags">
  <span class="tag">CSS</span>
  <span class="tag">Flexbox</span>
  <span class="tag">Grid</span>
  <span class="tag">Responsive</span>
</div>

nowrap + overflow: auto для горизонтального скролла

.scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
}
.scroll-row .item {
  flex-shrink: 0; /* элементы не сжимаются */
  width: 200px;
}

wrap-reverse

.bottom-up {
  display: flex;
  flex-wrap: wrap-reverse;
  /* Первые элементы внизу, новые строки добавляются сверху */
}

Влияние на align-content

При flex-wrap: wrap появляется несколько flex-строк. align-content управляет их распределением по поперечной оси:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: flex-start;  /* строки прижаты вверх */
  /* align-content: space-between; — строки равномерно распределены */
}

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

  1. align-items vs align-content — при wrap нескольких строк align-items выравнивает элементы внутри строки, align-content — сами строки между собой
  2. flex-wrap: wrap без flex-basis — элементы переносятся по ширине контента, что может дать непредсказуемый результат. Лучше задать flex: 1 1 минимальный-размер
  3. Ожидание равномерного заполнения последней строки — последняя строка с несколькими элементами при flex-grow: 1 не заполняет ряд до конца; нужен Grid для этого сценария

Связанные темы

Ресурсы