CSS flex-flow 属性

flex-flow 属性是 flex 布局中的一个组合属性，用于设置主轴方向上的排列方式和换行方式。

语法

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

• <flex-direction>：指定主轴方向的排列方式，可选值包括：

  • row：默认值，主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在顶部。
  • column-reverse：主轴为垂直方向，起点在底部。

• <flex-wrap>：指定换行方式，可选值包括：

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

示例

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

.item {
  flex: 1;
}

在上面的示例中，.container 是一个使用 flex 布局的容器，设置了 flex-flow: row wrap;，表示主轴为水平方向，且允许换行。.item 是容器中的子元素，设置了 flex: 1;，表示子元素在剩余空间中均分宽度。

注意事项

• flex-flow 属性可以简写为 flex-flow: <flex-direction> <flex-wrap>;，也可以单独设置 flex-direction 和 flex-wrap 属性。
• 使用 flex-flow 属性时，建议搭配使用其他 flex 相关属性，如 flex-direction、flex-wrap、flex-grow、flex-shrink 和 flex-basis，以实现更灵活的布局效果。