flex-flow 是 flex-direction 和 flex-wrap 的原子性简写，设了它两个属性都会被全量重置而非可选覆盖；必须写全如 column wrap，不可省略任一值，否则未显式指定的会回退到默认值（row/nowrap）。
flex-flow 是 flex-direction 和 flex-wrap 的原子性简写，设了它，两个子属性都会被重置——没显式写的那个会回退到默认值（row 和 nowrap），这点极易踩坑。
flex-flow 为什么不是“可选覆盖”，而是“全量重置”
它不是像 margin 那样可以只写一个值就保留其余；只要用了 flex-flow，哪怕只写 flex-flow: wrap，flex-direction 也会被强制设为 row（初始值），而不是继承之前设置的 column。
- 常见错误现象：
flex-direction: column;后又写flex-flow: wrap;，结果项目突然横着排了 - 正确做法：必须写全，比如竖向主轴+换行 →
flex-flow: column wrap; - 注意空格分隔，不能写成
column-wrap或用逗号
什么时候该用 flex-flow，而不是分开写
适合在初始化容器时一次性定调，尤其在响应式场景中配合媒体查询批量切换排列逻辑。
- 卡片网格布局：桌面端
flex-flow: row wrap;，移动端flex-flow: column nowrap; - 导航栏折叠：用
flex-flow: row wrap-reverse;快速翻转换行顺序，比分别改两个属性更紧凑 - 但调试阶段建议先分开写，确认行为后再合并——避免隐式重置干扰判断
flex-flow 值的合法组合与兼容性
第一个值必须是 flex-direction 的有效值（row / row-reverse / column / column-reverse），第二个必须是 flex-wrap 的（nowrap / wrap / wrap-reverse），顺序不可颠倒。
立即学习“前端免费学习笔记（深入）”；
- 不支持单值写法，
flex-flow: wrap;是合法的，但会把flex-direction置为row - IE10–11 对
flex-flow支持不完整，若需兼容，优先用分开声明 - Vue / React 组件内用内联样式时，JS 对象键名是
flexFlow（驼峰），值仍按 CSS 规则传字符串，如{ flexFlow: 'column wrap' }
真正容易被忽略的是它的原子性——它看起来是“简写”，实际是“覆盖指令”。很多布局错乱，根源不在方向或换行逻辑本身，而在你以为只改了一个维度，其实两个都被重写了。
