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 Свойство