flex-flow CSS свойство, которое является сокращением для отдельных свойств flex-direction и flex-wrap.
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
| Начальное значение | как и у каждого из подсвойств этого свойства:
|
|---|---|
| Применяется к | flex-контейнеры |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | discrete |
| Канонический порядок | порядок появления в формальной грамматике значений |
Больше информации и свойств описано в Using CSS flexible boxes.
Синтаксис
Значения
Смотрите flex-direction и flex-wrap.
Формальный синтаксис
Примеры
element {
/* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| CSS Flexible Box Layout Module Определение 'flex-flow' в этой спецификации. |
Кандидат в рекомендации | Начальное значение |
Совместимость с браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Возможность | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Базовая поддержка | 28.0[1] | 21.0-webkit 29.0 |
(Да)-webkit (Да) |
11 | 12.10 | 6.1-webkit |
| Возможность | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Базовая поддержка | 28.0[1] | ? | (Да)-webkit (Да) |
11 | 12.10 | 7.1-webkit |
[1] В дополенение к безпрефиксной поддержке, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) добавило поддержку для -webkit префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек layout.css.prefixes.webkit, по-умолчанию false. Поскольку Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) предпочтительное значение по-умолчанию true.