HTML | DOM 样式 flexFlow 属性

flexFlow 属性定义了弹性布局容器的主轴和侧轴边缘的方向以及呈现方式。它是 flex-direction 和 flex-wrap 属性的组合。

flex-direction 属性

flex-direction 属性定义了弹性容器中主轴的方向。它有以下几个可能的值：

• row：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 属性

flex-wrap 属性定义了弹性容器内的 flex 元素是否强制换行。它有以下三个可能的值：

• nowrap：默认值，不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

flexFlow 属性语法

flexFlow 属性必须在一个规则里指定，其值是 flex-direction 和 flex-wrap 属性值的组合，中间用空格隔开。

flex-flow: <flex-direction> <flex-wrap>;

下面是一个例子：

.container {
  display: flex;
  flex-flow: row wrap;
}

上面的例子中，flex-direction 为 row，flex-wrap 为 wrap，也就是说弹性容器主轴方向为水平方向，起点在左端，而且 flex 元素可以换行。

总结

• flex-flow 属性结合了 flex-direction 和 flex-wrap 属性。
• flex-direction 定义了弹性容器内 flex 元素的排列方向。
• flex-wrap 定义了弹性容器内的 flex 元素是否强制换行。
• flex-direction 属性的可能值有 row，row-reverse，column 和 column-reverse。
• flex-wrap 属性的可能值有 nowrap，wrap 和 wrap-reverse。
• flex-flow 属性其值形如 <flex-direction> <flex-wrap>，中间用空格隔开。