Какое свойство позволяет flex переносить элементы внутри контейнера вниз?

Свойство flex-wrap для переноса элементов

Ответ: flex-wrap

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

Основные значения flex-wrap

.flex-container {
  display: flex;
  flex-wrap: nowrap;   /* По умолчанию - БЕЗ переноса */
}

1. flex-wrap: nowrap (по умолчанию)

.container {
  display: flex;
  flex-wrap: nowrap;  /* Все элементы в одну строку */
  width: 300px;
}

.item {
  width: 100px;
  min-width: 100px; /* Не сжимается */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Результат: элементы будут сжаты, чтобы все поместились в одну строку (if min-width не установлена)

|1|2|3|4|  (все в одну строку, может быть сжато)

2. flex-wrap: wrap (переносит вниз)

.container {
  display: flex;
  flex-wrap: wrap;     /* Переносит элементы на новую строку */
  width: 300px;
  gap: 10px;
}

.item {
  width: 100px;
  min-width: 100px;
}

Результат: элементы переносятся вниз на новую строку

|1|2|3|
|4|

3. flex-wrap: wrap-reverse (переносит вверх)

.container {
  display: flex;
  flex-wrap: wrap-reverse;  /* Переносит в обратном направлении */
}

Результат:

|4|
|1|2|3|

Практический пример: адаптивный grid

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;        /* Переносит вниз */
  gap: 16px;
  width: 100%;
}

.card {
  flex: 1 1 calc(33.333% - 16px); /* Минимум 3 в ряд */
  min-width: 250px;               /* Не сжимается меньше 250px */
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* На мобильных - один в ряд */
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;  /* Один элемент в ряд */
  }
}

Полный пример с flexbox flow

/* flex-direction + flex-wrap = flex-flow */
.container {
  display: flex;
  
  /* Способ 1: раздельно */
  flex-direction: row;    /* Направление: левой -> направо */
  flex-wrap: wrap;        /* Перенос: вниз на новую строку */
  
  /* ИЛИ сокращение */
  flex-flow: row wrap;    /* Direction + wrap */
}

Выравнивание элементов при переносе

Когда включен flex-wrap, можно использовать align-content для выравнивания рядов:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;          /* Высота контейнера */
  gap: 10px;
  
  /* Выравнивание РЯДОВ (не элементов) */
  align-content: flex-start;    /* К верхней части */
  align-content: center;        /* По центру */
  align-content: flex-end;      /* К нижней части */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around;  /* С промежутками */
  align-content: stretch;       /* Растянуть на всю высоту */
}

.item {
  width: 100px;
  height: 100px;
}

Визуально с align-content: space-between и 2 строками:

|1|2|3|


|4|5|6|

Частая ошибка: забывают flex-wrap

/* НЕПРАВИЛЬНО - элементы будут сжаты */
.container {
  display: flex;   /* flex-wrap: nowrap по умолчанию */
  width: 300px;
}

.item {
  width: 100px;
  /* Каждый элемент станет ~75px вместо 100px */
}

/* ПРАВИЛЬНО */
.container {
  display: flex;
  flex-wrap: wrap;  /* Включить перенос */
  width: 300px;
}

.item {
  width: 100px;
  /* Останется 100px, 4-й элемент перенесется вниз */
}

Реальный пример: меню с переносом

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

.navbar {
  display: flex;
  flex-wrap: wrap;      /* На мобильных элементы переносятся */
  gap: 10px;
  padding: 10px;
  background: #333;
}

.navbar a {
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  white-space: nowrap;  /* Не переносить текст */
}

@media (max-width: 600px) {
  /* На мобильных каждая ссылка в новой строке */
  .navbar a {
    flex: 1 1 100%;
  }
}

Взаимодействие с flex-grow и flex-shrink

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

.item {
  width: 100px;
  
  /* Взаимодействие с wrap */
  flex-grow: 1;     /* Растягивается в оставшемся пространстве */
  flex-shrink: 0;   /* НЕ сжимается, вместо этого переносится */
}

Сравнение Flexbox vs CSS Grid для переноса

/* Flexbox с wrap - для одномерного потока */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* CSS Grid - для двумерного макета */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

Оба достигают похожего результата, но:

• Flexbox - для одномерных макетов (строки или колонки)
• Grid - для двумерных сложных макетов

Итоги

• flex-wrap: wrap позволяет элементам переноситься вниз на новую строку
• flex-wrap: nowrap (по умолчанию) сжимает элементы в одну строку
• flex-wrap: wrap-reverse переносит в обратном направлении
• flex-flow - сокращение для flex-direction + flex-wrap
• align-content выравнивает рядов при переносе
• flex-wrap критично для адаптивных макетов на мобильных
• Для сложных макетов рассмотри CSS Grid вместо Flexbox