flex-flow
flex-flow
CSSflex-flow属性是 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-direction：row flex-wrap：nowrap |
|---|---|
| 适用于 | 柔性容器 |
| 遗传 | 没有 |
| 媒体 | 视觉 |
| 计算值 | 作为简写的每个属性：flex-direction：如指定的flex-wrap：所指定的那样 |
| 动画类型 | 离散的 |
| 规范的顺序 | 出现在价值形式语法中的次序 |
flex-direction*row
flex-wrap*nowrap
Applies to flex containers [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
flex-direction*具体规定
flex-wrap*具体规定
Animation type discrete Canonical order order of appearance in the formal grammar of the values
见使用CSS柔性盒有关更多属性和信息的信息。
语法
取值
见flex-direction和flex-wrap有关值的详细信息。
形式语法
<'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;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout ModuleThe definition of 'flex-flow' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 28.01 | 21.0-webkit 29.0 | (Yes)-webkit (Yes) | 11 | 12.10 | 6.1-webkit |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 28.01 | ? | (Yes)-webkit (Yes) | 11 | 12.10 | 7.1-webkit |
