Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
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;
}