Справочник HTML & CSS

flex-wrap

Могут ли flex-элементы переноситься на новые строки.

Синтаксис

flex-wrap: wrap;

Значения

Параметр	Тип	Описание
nowrap	keyword	Всё в одну строку, элементы сжимаются (по умолчанию).
wrap	keyword	Элементы, которые не помещаются, переходят на следующую строку.

Примеры

Метки, которые переносятся на несколько строк:

<style>
  .tags { display: flex; gap: 6px; width: 240px; border: 1px dashed gray; }
  .tags span { padding: 4px 10px; background: lavender; border-radius: 12px; }
</style>
 
<div class="tags" style="flex-wrap: wrap;">
  <span>html</span><span>css</span><span>javascript</span><span>php</span><span>python</span>
</div>

Примечания

Без wrap элементы втискиваются в одну строку и могут вылезти за контейнер. flex-flow: row wrap задаёт направление и перенос сразу.

См. также

flex-direction — Направление главной оси flex-контейнера: элементы в ряд или в столбик.
flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.
gap — Промежутки между элементами во flexbox и grid.
align-content — Распределяет строки многострочного flex-контейнера или ряды сетки вдоль поперечной оси.

Вопросы и ответы по теме

В учебнике

Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.

Спасибо, что читаете!