СSS Свойство 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 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.flexFlow="column nowrap" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit- или -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 row-reverse column column-reverse initial inherit По умолчанию значение "row". Указание направления гибких элементов |
Воспроизвести » |
| flex-wrap | Возможное значение: nowrap wrap wrap-reverse initial inherit По умолчанию значение "nowrap". Указание того, должны ли быть гибкие элементы обернуты или нет |
Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Связанные страницы
CSS Учебник: CSS Гибкий бокс
CSS Справочник: Свойство flex
CSS Справочник: Свойство flex-direction
CSS Справочник: Свойство flex-wrap
CSS Справочник: Свойство flex-basis
CSS Справочник: Свойство flex-grow
CSS Справочник: Свойство flex-shrink
HTML DOM Справочник: Свойство flexFlow
