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