flex-flow是flex-direction与flex-wrap的简写属性，用于合并设置主轴方向和换行方式，默认值为row nowrap；例如flex-flow: row wrap可实现横向排列并换行，比单独设置更简洁，适用于响应式布局。
使用 flex-flow 可以将 flex-direction 和 flex-wrap 两个属性合并书写，简化 CSS 代码，让布局更清晰、易读。
flex-flow 是什么？
flex-flow 是 flex-direction 和 flex-wrap 的简写属性。它允许你在一行内定义主轴方向和换行方式。
默认值是：row nowrap，也就是元素从左到右排列且不换行。
常见取值与对应效果
以下是常用的 flex-flow 写法及其等效拆分：
立即学习“前端免费学习笔记（深入）”；
-
flex-flow: row nowrap;
→ 横向排列，不换行 -
flex-flow: row wrap;
→ 横向排列，换行（第一行在上） -
flex-flow: column wrap;
→ 纵向排列，允许横向换列 -
flex-flow: row-reverse wrap;
→ 从右到左排列，换行时新行在下方
实际使用示例
比如你想做一个响应式导航栏，项目从左到右排列，并在空间不足时自动换行：
.flex-container {
display: flex;
flex-flow: row wrap;
}
相比分开写两行，这样更简洁：
/* 等效但更啰嗦 */.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
什么时候该用 flex-flow？
当你同时设置 flex-direction 和 flex-wrap 时，推荐使用 flex-flow 合并书写。尤其在响应式设计中，能减少代码量，提高可维护性。
如果只修改其中一个属性，保持单独设置更清晰。
基本上就这些，用好 flex-flow 能让你的 Flexbox 样式更干净利落。不复杂但容易忽略的小技巧。
