CSS | flex-flow 属性

在 CSS 中，flex-flow 属性用于设置弹性容器中的子元素的布局方式。

语法

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;
}

上述代码将创建一个弹性容器，并设置子元素水平排列，并在必要时换行。

注意事项

• 使用 flex-flow 属性可以简写 flex-direction 和 flex-wrap 属性，两者的取值顺序必须一致。
• flex-flow 属性常与 display: flex 结合使用，以定义弹性容器的布局。

参考文档： flex-flow - CSS | MDN