flex-flow 设了却没生效是因为它会完全取代之前单独设置的 flex-direction 和 flex-wrap，而非叠加；检查是否混用单属性与复合属性、注意加载顺序和 specificity，调试时查看 computed 面板确认最终值。
flex-flow 为什么设了却没生效
因为 flex-flow 是 flex-direction 和 flex-wrap 的简写，浏览器会用它覆盖掉之前单独写的这两个属性。如果你在同一个选择器里先写了 flex-direction: column，又写 flex-flow: row wrap，那 column 就被悄悄替换了——不是“叠加”，是“取代”。
- 检查 css 中是否混用了单属性和复合属性，尤其注意样式表加载顺序和 specificity
- 想保留某个方向但只改换行，就别用
flex-flow，直接改flex-wrap - 调试时右键审查元素，在“Computed”面板里搜
flex-direction和flex-wrap，看最终值从哪来
flex-flow 常见取值组合与实际表现
它俩绑在一起写，但语义上是独立的：前面是方向，后面是换行。写反了或漏了会触发默认行为，不是报错，所以很难察觉。
-
flex-flow: row wrap→ 水平主轴 + 换行（最常用） -
flex-flow: column nowrap→ 垂直主轴 + 不换行（适合侧边菜单） -
flex-flow: row-reverse wrap-reverse→ 主轴反向 + 换行后也反向（最后一行在最上面） - 只写一个值如
flex-flow: column，等价于flex-flow: column nowrap，wrap不会自动补上
IE10/11 对 flex-flow 的兼容性陷阱
IE10–11 支持 flex-flow，但有个致命问题：它不识别带连字符的值，比如 row-reverse 或 wrap-reverse 会被整个忽略，退回到初始值 row nowrap，而且不报错、不警告。
- 如果项目必须兼容 IE，避免使用
-reverse类取值，改用flex-direction+flex-wrap分开写，并加-ms-前缀 -
-ms-flex-flow: row wrap在 IE10/11 中可用，但-ms-flex-flow: row-reverse wrap会失效 - 用 Autoprefixer 时注意配置，它默认不为
flex-flow生成-ms-版本，得手动加
flex-flow 在媒体查询中容易被覆盖的细节
响应式布局里常在不同断点重设 flex-flow，但很多人忘了：它的两个子属性有各自的初始值，而复合属性不会“部分继承”。比如桌面端设了 flex-flow: column wrap，移动端只写 flex-flow: row，结果是 row nowrap，不是 row wrap。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询中若只调整方向，明确写出完整值：
flex-flow: row wrap，别省略wrap - 不要依赖“之前设过 wrap 就还会生效”，CSS 没有状态记忆
- 用 CSS 自定义属性做开关（如
--wrap: wrap）再拼接，对维护友好但运行时无性能优势
事情说清了就结束。真正麻烦的不是语法，是它看起来像能“局部更新”，其实每次都是全量覆盖。