flex-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
概述
CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
| 初始值 | 该简写所对应的每个属性：
|
|---|---|
| 适用元素 | 弹性容器 |
| 是否是继承属性 | 否 |
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 该简写所对应的每个属性：
|
更多信息参见 使用 CSS 弹性盒
语法
css
/* 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'> 和 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* 全局值 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
取值
更多取值信息请查看 flex-direction 和 flex-wrap
示例
css
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;
}
规范
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |