flex-flow 是全量重置属性，必须同时指定 flex-direction 和 flex-wrap 两个值，顺序固定、缺一不可；只写一个值会导致另一个回退默认值或解析错误。
flex-flow 不是“可选覆盖”，而是全量重置：只要用了它，flex-direction 和 flex-wrap 都会被同时设为新值，漏写任何一个，另一个就回退到默认值（row / nowrap）。
为什么只写 flex-flow: wrap 会出错？
因为 flex-flow 必须写满两个值，空格分隔，顺序固定：flex-direction 值在前，flex-wrap 值在后。只写一个值（比如 wrap）时，浏览器会把它当作 flex-direction 的值处理，而 flex-wrap 则被忽略——结果是主轴悄悄变回 row，换行也不生效。
- ❌ 错误写法：
flex-flow: wrap;→ 实际等价于flex-direction: wrap; flex-wrap: nowrap;（wrap不是合法的flex-direction值，部分浏览器会降级为row） - ❌ 错误写法：
flex-flow: column;→flex-wrap被重置为nowrap，即使之前设过wrap也无效 - ✅ 正确写法只有明确成对出现：
flex-flow: row wrap;、flex-flow: column wrap-reverse;、flex-flow: row-reverse nowrap;
什么场景下该用 flex-flow？
适合初始化或批量切换布局逻辑的时刻，尤其是媒体查询中一次性改掉整套排列行为。
- 移动端导航折叠：
@media (max-width: 767px) { .nav { flex-flow: column nowrap; } } - 翻转换行顺序：
flex-flow: row wrap-reverse;比分别写两行更紧凑 - 组件库中做主题预设时，用单个声明表达完整排列意图（但需确保下游不依赖局部覆盖）
IE10–11 兼容性必须绕开 flex-flow
IE 对 flex-flow 支持极差，尤其涉及 wrap-reverse 或 column 组合时，常直接忽略或渲染错乱。
立即学习“前端免费学习笔记（深入）”；
- ❌
flex-flow: column wrap;在 IE10–11 中大概率失效 - ✅ 安全写法：分开声明
flex-direction: column;+flex-wrap: wrap; - Vue / React 内联样式中虽可用
{ flexFlow: 'column wrap' }，但若项目需兼容旧 IE，仍应避免
调试阶段建议先分开写
当你不确定当前布局是否已被其他规则影响，或者多人协作中存在隐式继承时，flex-flow 的“原子性”反而会掩盖问题根源。
- 先用
flex-direction: column;和flex-wrap: wrap;分开验证每一步效果 - 确认无误后再合并为
flex-flow: column wrap;，避免把column主轴错觉成row却找不到原因 - 特别注意第三方 UI 库或重置样式中是否已设过
flex-flow，它可能在你没注意到的地方悄悄覆盖了你的flex-direction
真正难的不是记住语法，而是意识到每次写 flex-flow 都等于在重置两个独立维度——这个行为是否在你预期路径里被显式确认过，决定了布局到底是可控还是偶然正确。
