flex-wrap

Обновлено: 29.03.2023

flex-wrap

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

Краткая информация

Значение по умолчанию nowrap
Наследуется Нет
Применяется К флекс-контейнеру
Анимируется Нет

Синтаксис 

flex-wrap: nowrap | wrap | wrap-reverse

Значения

nowrap Флексы выстраиваются в одну линию.
wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

Пример

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-wrap.

Браузеры

flex-wrap

Посмотреть совместимость на Can I use?

flex-wrap