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

Flex Wrap: управление переносом элементов в Flexbox

Flex Wrap — это CSS свойство, которое определяет, будут ли flex-элементы переноситься на новую строку (или колонку) когда они не помещаются в контейнер, или они будут сжиматься, чтобы поместиться в одну линию.

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

1. flex-wrap: nowrap (значение по умолчанию) Все элементы остаются на одной линии. Если они не помещаются, они сжимаются:

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
  border: 1px solid black;
}

.item {
  flex: 0 0 100px; /* width 100px, не сжимаются */
  background: lightblue;
  margin: 5px;
}

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

Результат: все 4 элемента (100px каждый + 5px margin) будут сжаты, чтобы поместиться в контейнер 300px.

2. flex-wrap: wrap Элементы переносятся на новую строку, когда не помещаются:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid black;
}

.item {
  flex: 0 0 100px;
  background: lightblue;
  margin: 5px;
}

Результат: первые 2 элемента на первой строке, 2 элемента на второй строке (потому что 100px + 100px + 10px margin = ~210px, что влезает в 300px).

3. flex-wrap: wrap-reverse Элементы переносятся, но строки идут в обратном порядке (снизу вверх):

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 300px;
  height: 200px;
}

Результат: последняя строка элементов будет отображена первой (вверху), а первая строка — внизу.

Как работает Flex Wrap внутри

Без flex-wrap (nowrap):

Контейнер: [======= 300px =======]
Элементы:  [100px] [100px] [100px] [100px]
                ▼       ▼       ▼       ▼
           Сжимаются, чтобы поместиться в одну линию

С flex-wrap: wrap:

Контейнер: [======= 300px =======]
Строка 1:  [100px] [100px]
Строка 2:  [100px] [100px]

Практические примеры

Пример 1: Адаптивная галерея фотографий

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1200px;
}

.photo {
  flex: 0 0 calc(25% - 8px); /* 4 фото в строке */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* На планшете 2 фото в строке */
@media (max-width: 768px) {
  .photo {
    flex: 0 0 calc(50% - 5px);
  }
}

/* На мобильном 1 фото в строке */
@media (max-width: 480px) {
  .photo {
    flex: 0 0 100%;
  }
}

Пример 2: Тэги с переносом

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center; /* Выравнивание по вертикали внутри строки */
}

.tag {
  flex: 0 0 auto; /* Не расширяется, не сжимается */
  background: #e0e0e0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

<div class="tags-container">
  <span class="tag">React</span>
  <span class="tag">JavaScript</span>
  <span class="tag">CSS</span>
  <span class="tag">Flexbox</span>
  <span class="tag">Web Design</span>
</div>

Пример 3: Кнопки в форме

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end; /* Кнопки справа */
}

.btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

/* На мобильном кнопки на всю ширину */
@media (max-width: 480px) {
  .button-group {
    justify-content: stretch; /* На полную ширину */
  }
  
  .btn {
    flex: 1 1 auto; /* Растягиваются поровну */
  }
}

Пример 4: Меню навигации с переносом

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #333;
  padding: 15px;
  align-items: center;
}

.nav-item {
  flex: 0 0 auto;
  color: white;
  text-decoration: none;
}

.logo {
  flex: 0 0 auto;
  font-weight: bold;
  font-size: 20px;
}

.spacer {
  flex: 1 1 auto; /* Занимает все оставшееся пространство */
}

Взаимодействие с другими свойствами

Flex-wrap с align-content: Когда используется flex-wrap: wrap, свойство align-content контролирует распределение пространства между строками/колонками:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between; /* Пространство между строками */
}

Значения align-content:

• flex-start — строки в начале
• flex-end — строки в конце
• center — строки в центре
• space-between — распределено с промежутками
• space-around — распределено с равными промежутками
• stretch — строки растягиваются (по умолчанию)

Пример с align-content:

.grid-like {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  height: 400px;
  border: 2px solid black;
  align-content: space-between;
}

.item {
  flex: 0 0 calc(33.333% - 10px);
  background: lightcoral;
  padding: 20px;
  text-align: center;
}

Производительность и браузеры

Поддержка браузерами: Flex-wrap поддерживается всеми современными браузерами (IE 11+ с префиксом -ms).

Производительность: Flex-wrap работает эффективно, но нужно помнить:

• Переносы пересчитываются при изменении ширины контейнера
• Для больших списков лучше использовать virtual scrolling
• Media queries лучше, чем полная переделка DOM

Реальный пример: Responsive Product Grid

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.product {
  flex: 0 0 calc(25% - 15px);
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
  .product {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  .product {
    flex: 0 0 100%;
  }
}

Flex-wrap — это ключевое свойство для создания адаптивных и гибких макетов, которые автоматически подстраиваются под разные размеры экранов.