flex-wrap
При необходимости оберните гибкие изделия:
div {
display: flex;
flex-wrap: wrap;
}
Попробуйте сами »
Определение flex-wrap
CSS свойство flex-wrap
определяет, должны ли гибкие элементы обертываться или нет.
Примечание: Если элементы не являются гибкими элементами, CSS свойство flex-wrap
не имеет никакого эффекта.
Значение по умолчанию: | nowrap |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.flexWrap="nowrap" Попробуй |
Поддержка flex-wrap
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
flex-wrap | 29.0 21.0-webkit- |
11.0 | 28.0 18.0-moz- |
9.0 6.1-webkit- |
17.0 |
Синтаксис flex-wrap
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Значения flex-wrap
Значение | Описание | Демонстрация |
---|---|---|
nowrap | Значение по умолчанию. Указывает, что гибкие элементы не будут обертываться | Демо ❯ |
wrap | Определяет, что гибкие элементы будут обернуты при необходимости | Демо ❯ |
wrap-reverse | Определяет, что гибкие элементы будут обернуты, при необходимости, в обратном порядке | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме flex-wrap
CSS Учебник: CSS Гибкий бокс
CSS Справочник: flex свойство
CSS Справочник: flex-flow свойство
CSS Справочник: flex-direction свойство
CSS Справочник: flex-basis свойство
CSS Справочник: flex-grow свойство
CSS Справочник: flex-shrink свойство
HTML DOM справочник: flexWrap свойство