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 |
浏览器兼容性
BCD tables only load in the browser