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;
}