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.

Поддержка браузеров

Свойство flex-wrap поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.