flex-flow

基线 广泛可用

此功能已得到很好的建立，并且可在许多设备和浏览器版本中使用。它自以下版本起在所有浏览器中都可用 2015 年 9 月.

flex-flow CSS 简写属性 指定弹性容器的方向及其换行行为。

试一试

构成属性

此属性是以下 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'> 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: revert;
flex-flow: revert-layer;
flex-flow: unset;

值

有关值的详细信息，请参阅 flex-direction 和 flex-wrap。

正式定义

初始值作为简写属性的每个属性
应用于弹性容器
继承否
计算值作为简写属性的每个属性
动画类型作为简写属性的每个属性

正式语法

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse

示例

设置 column-reverse 和 wrap

在此示例中，主轴为块方向，主起点和主终点反转。允许弹性项目换行，如果需要，则创建新行。

css
element {
  flex-flow: column-reverse wrap;
}

规范

规范
CSS 弹性盒子布局模块级别 1
# flex-flow-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅