flex-flow是flex-direction和flex-wrap的简写，必须同时指定两个值，顺序固定为“方向 值+换行 值”，如row wrap；单值写法会重置未指定属性为默认值（row/nowrap），非可选覆盖而是全量重置。
flex-flow 必须写全两个值，不能只写一个
它不是“可选覆盖”，而是“全量重置”：只要用了 flex-flow，flex-direction 和 flex-wrap 都会被同时设为新值，没写的那个会回退到默认值（row 和 nowrap）。比如你先写了 flex-direction: column;，后面又加一句 flex-flow: wrap;，结果主轴会悄悄变回 row，项目横着排了——这就是典型误用。
正确写法只有两种形式：
-
flex-flow: row wrap;（横向主轴 + 换行） -
flex-flow: column nowrap;（纵向主轴 + 不换行）
空格分隔，不能用连字符或逗号；顺序固定：必须是 flex-direction 值在前、flex-wrap 值在后。
什么时候该用 flex-flow，而不是分开写？
适合初始化容器时一次性定调，尤其在响应式场景中配合媒体查询批量切换排列逻辑。例如：
立即学习“前端免费学习笔记（深入）”；
- 桌面端卡片网格：
@media (min-width: 768px) { .grid { flex-flow: row wrap; } } - 移动端折叠导航：
@media (max-width: 767px) { .nav { flex-flow: column nowrap; } } - 翻转换行顺序：
flex-flow: row wrap-reverse;比分别改flex-wrap和保留flex-direction更紧凑
但调试阶段建议先分开写——flex-direction: column; + flex-wrap: wrap; 能让你清楚看到每个属性的作用，避免隐式重置干扰判断。
IE10–11 兼容性差，线上项目慎用
flex-flow 在 IE10–11 中支持不完整，部分组合会失效或渲染异常。若需兼容这些旧版本，优先用分开声明：
- ❌
flex-flow: column wrap;（IE 可能忽略或错解析） - ✅
flex-direction: column; flex-wrap: wrap;（兼容性更稳）
Vue / React 组件内用内联样式时，JS 对象键名是 flexFlow（驼峰），值仍按 CSS 规则传字符串，如 { flexFlow: 'column wrap' }，但同样要注意 IE 兼容问题。
容易被忽略的原子性：它不是简写，是覆盖指令
很多布局错乱，根源不在方向或换行逻辑本身，而在你以为只改了一个维度，其实两个都被重写了。比如你在组件库中看到某处用了 flex-flow: wrap;，却没意识到它把父级已设的 column 主轴悄悄覆盖掉了。真正关键的不是语法多难，而是这个“全量替换”的行为是否在你的控制路径里被显式确认过。
