CSS flex-wrap Свойство
Пример
При необходимости сделайте перенос гибких элементов:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}
Определение и использование
Свойство flex-wrap указывает, следует ли обернуть гибкие элементы.
Примечание: Если элементы не являются гибкими элементами, свойство flex-wrap не имеет эффекта.
| Значение по умолчанию: | nowrap |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.flexWrap="nowrap" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| flex-wrap | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Синтаксис CSS
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| nowrap | Значение по умолчанию. Указывает, что гибкие элементы не будут обернуты | |
| wrap | Указывает, что гибкие элементы будут обернуты при необходимости | |
| wrap-reverse | Указывает, что гибкие элементы будут обернуть, при необходимости, в обратном порядке | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex Свойство
CSS Справка: flex-flow Свойство
CSS Справка: flex-direction Свойство
CSS Справка: flex-basis Свойство
CSS Справка: flex-grow Свойство
CSS Справка: flex-shrink Свойство
HTML DOM Справочник: flexWrap Свойство