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

CSS-свойство flex-wrap указывает, будут ли flex-элементы помещены в одну строку или они будут перенесены на несколько строк или столбцов в зависимости от пространства доступного во flex-контейнере.

Значение по умолчанию:	`nowrap`
Применяется к:	Flex containers
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства flex-wrap:

.flex-container {
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
    /* Standard syntax */
    display: flex;
    flex-wrap: nowrap;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`nowrap`	Указывает, что все flex-элементы отображаются в одной строке или столбце, что может привести к переполнению flex-контейнера. CSS-свойство `overflow` flex-контейнера определяет, являются ли элементы скрытыми, обрезанными или прокручиваемыми.
`wrap`	Указывает, что гибкие элементы будут в несколько строк при необходимости.
`wrap-reverse`	Ведет себя так же, как `wrap`, но элементы будут переноситься в обратном порядке.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `flex-wrap`.