Исполняемые доки CSS: flex-wrap в CSS

Q: Чем отличаются flex-direction row и column?

row (по умолчанию) ставит элементы бок о бок в направлении письма, а column складывает их сверху вниз. Вместе с ним поворачивается главная ось, поэтому в колонке justify-content работает по вертикали, а align-items по горизонтали.

Q: Что такое flex-flow?

Сокращение для flex-direction и flex-wrap в одном объявлении: flex-flow: row wrap; то же самое, что flex-direction: row; flex-wrap: wrap;.

Q: Чем align-items отличается от align-content?

align-items размещает элементы внутри их строки. align-content размещает сами строки внутри контейнера, поэтому он важен, только когда у контейнера flex-wrap: wrap и он выше своих строк.

flex-wrap: одна строка или сколько нужно

По умолчанию flex-контейнер держит все элементы в одной строке (flex-wrap: nowrap) и сжимает их, чтобы они поместились. flex-wrap: wrap позволяет им сохранить размер и перейти на следующую строку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Каждый элемент просит 100px, их пять в блоке шириной 340px. Пяти элементам и четырем промежуткам по 8px нужно 532px, поэтому без переноса каждый элемент сжимается примерно до 62px: flex-элементы по умолчанию сжимаются. С wrap они остаются по 100px: три помещаются в первой строке, а два других переходят во вторую.

Значения flex-wrap

Значение	Что происходит
`nowrap` (по умолчанию)	Одна строка. Элементы сжимаются, а когда сжиматься дальше не могут, вылезают за контейнер
`wrap`	Элементы, которые не помещаются, начинают новую строку ниже
`wrap-reverse`	То же, но новые строки складываются вверх: первая строка оказывается внизу

Посмотрите, как элементы переносятся

Двигайте ползунок, чтобы менять ширину контейнера. Счетчик показывает число строк и сколько элементов в каждой:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

При 400px в строку помещаются четыре элемента по 90px и три промежутка по 8px (384px), и получается 4 + 2. Потяните к 620px, и все шесть поместятся в одну строку; потяните к 120px, и каждый элемент получит свою строку.

flex-direction: строка или колонка

flex-direction задает направление, в котором идут элементы, то есть главную ось:

Значение	Элементы идут	Первый элемент
`row` (по умолчанию)	бок о бок, в направлении письма	в начале строки
`row-reverse`	бок о бок, в обратном порядке	в конце строки
`column`	стопкой, сверху вниз	сверху
`column-reverse`	стопкой, снизу вверх	снизу

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

В двух блоках row элементы растягиваются на всю высоту блока, потому что align-items: stretch работает поперек строки. В блоках column они по той же причине растягиваются на всю ширину. Оси повернулись, и вместе с ними повернулось каждое свойство выравнивания (подробно это показано на странице про justify-content).

flex-flow: оба свойства в одной строке

flex-flow это сокращение для flex-direction, а затем flex-wrap:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

Адаптивные карточки через wrap без медиазапросов

Дайте каждому элементу начальный размер через flex: 1 1 180px и разрешите перенос. Каждый элемент растет, заполняя свою строку, а когда в строку не помещается еще один элемент на 180px, следующий переносится:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

В превью шириной около 800px в первую строку помещаются три карточки (около 253px каждая), а последние две делят вторую строку, где каждая вырастает примерно до 386px. Так работает flexbox: каждая строка делит свое пространство сама, поэтому карточки в короткой последней строке оказываются шире верхних. Если последняя карточка должна быть той же ширины, что и остальные, используйте grid с repeat(auto-fill, minmax(180px, 1fr)) (смотрите страницу про CSS Grid).

align-content: промежутки между строками

Когда контейнер переносит элементы и выше своих строк, align-content решает, где будут строки. Он принимает те же значения, что justify-content, плюс stretch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

В первом блоке обе строки стоят сверху. Во втором первая строка сверху, вторая снизу, а вся свободная высота между ними.

Обратный порядок и доступность

row-reverse, column-reverse и wrap-reverse меняют только то, где элементы рисуются. Программы чтения с экрана и клавиша Tab по-прежнему следуют порядку HTML, поэтому пользователь клавиатуры проходит элементы в направлении, обратном тому, что видит. Разворачивайте только ради визуального эффекта; когда порядок что-то значит, меняйте его в HTML.

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

Элементы сжимаются, а не переносятся. Элементы с flex: 1 начинают с flex-basis 0 и втискиваются в одну строку. Дайте им настоящую основу, например flex: 1 1 200px.
flex-wrap у элементов. Ему место у flex-контейнера.
align-items для промежутков между перенесенными строками. Оно выравнивает элементы внутри каждой строки; сами строки двигает align-content.
Одинокий последний элемент растянут на всю строку. Это flex-grow в строке с одним элементом. Используйте grid, если все карточки должны быть одинаковой ширины.
Ожидание, что flex-direction: column заполнит высоту. Колонка высотой только с содержимое, если не задать ей height, поэтому justify-content негде работать.

Часто задаваемые вопросы

Что делает flex-wrap: wrap?

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

Почему не работает flex-wrap?

Перенос происходит, только когда начальные размеры элементов в сумме больше контейнера. Элементы с flex: 1 начинают с flex-basis 0, поэтому никогда не переносятся; дайте им настоящий начальный размер (flex: 1 1 200px или width: 200px). Также проверьте, что flex-wrap задан flex-контейнеру, а не элементам.

Чем отличаются flex-direction row и column?

row (по умолчанию) ставит элементы бок о бок в направлении письма, а column складывает их сверху вниз. Вместе с ним поворачивается главная ось, поэтому в колонке justify-content работает по вертикали, а align-items по горизонтали.

Что такое flex-flow?

Сокращение для flex-direction и flex-wrap в одном объявлении: flex-flow: row wrap; то же самое, что flex-direction: row; flex-wrap: wrap;.

Чем align-items отличается от align-content?

align-items размещает элементы внутри их строки. align-content размещает сами строки внутри контейнера, поэтому он важен, только когда у контейнера flex-wrap: wrap и он выше своих строк.

Связанные концепции