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