Вы здесь

CSS свойство flex-wrap

Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

CSS синтаксис

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Возможные значения

Значение Описание
nowrap Значение по умолчанию. Флекс-элементы выстраиваются в одну линию и на новую строку не переносятся.
wrap Флекс-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении, установленном свойством flex-direction.
wrap-reverse Флекс-элементы переносятся, располагаясь в противоположном установленному свойством flex-direction порядке, при этом перенос происходит снизу вверх.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем, чтобы флекс-элементы переносились на новую строку


div {
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;   
    flex-wrap: wrap;
}