flex-flow 是 flex-direction 和 flex-wrap 的原子性简写，设其一即重置二者；语法为 flex-flow: <direction> <wrap>，顺序不可颠倒，单值仅设 direction、wrap 回退 nowrap。
flex-flow 是 flex-direction 和 flex-wrap 的简写，不能单独设置其中一个
很多人以为 flex-flow 可以像 margin 那样“部分覆盖”，比如只改 flex-direction 却保留原有 flex-wrap 值——不行。flex-flow 是原子性简写，只要设了它，就会把两个子属性都重置为显式值，没写的那个会回退到初始值（flex-direction: row，flex-wrap: nowrap）。
常见错误现象：
原样式写了 flex-wrap: wrap，后面又加了 flex-flow: column，结果换向了但换行失效——因为 flex-flow: column 等价于 flex-direction: column; flex-wrap: nowrap。
- 想只改方向？直接用
flex-direction - 想只改换行？直接用
flex-wrap - 要同时设？必须写全，例如
flex-flow: column wrap或flex-flow: row-reverse wrap-reverse
flex-flow 的取值顺序固定：direction 在前，wrap 在后
语法是 flex-flow: <flex-direction> <flex-wrap>，顺序不能颠倒。写成 flex-flow: wrap column 会被浏览器忽略（解析失败），整个声明无效。
使用场景：批量切换布局方向+换行策略时，比如响应式中桌面横排换行、移动端竖排不换行：@media (max-width: 768px) { .list { flex-flow: column nowrap; } }
立即学习“前端免费学习笔记（深入）”；
- 合法值对：常见的有
row wrap、column wrap、row-reverse wrap-reverse - 单值写法（如
flex-flow: column）只设 direction，wrap 自动为nowrap - IE10–11 支持
flex-flow，但不支持row-reverse等新方向值，需测试
flex-flow 不继承，但会覆盖父级 display: flex 的默认行为
父容器设了 display: flex，子项默认是 flex-direction: row; flex-wrap: nowrap。一旦在子项上写 flex-flow: column，它只影响自身这个 flex 容器的子元素（即它的后代 flex 项目），和父级无关——这点容易误判为“嵌套冲突”。
性能影响几乎为零，但要注意层级混淆：比如你在某个 .card 上设了 display: flex 和 flex-flow: column，那它的直接子元素（如 .card__header）才是按列排列的项目；别指望它让更外层的 .grid 也变向。
- 检查是否多套 flex 容器嵌套，避免在错误层级写
flex-flow - 用浏览器开发者工具的 Layout 面板，点开每个元素，看「Flex container」下显示的 direction 和 wrap 值是否符合预期
- 不要依赖继承：子容器必须自己声明
display: flex才能用flex-flow
和 align-content 冲突时，wrap 设为 nowrap 就会让 align-content 失效
align-content 只在多行 flex 容器中起作用（即 flex-wrap: wrap 或 wrap-reverse）。如果用了 flex-flow: row nowrap（默认值），哪怕你写了 align-content: center，它也不会生效——控制台不会报错，但布局毫无反应。
容易踩的坑：复制粘贴代码时漏掉 wrap，或者用预处理器变量拼接 flex-flow 时少传了一个参数，导致实际只写了方向。
- 调试时先确认
flex-wrap是否为wrap或wrap-reverse - 用
flex-flow: row wrap显式写出，比省略更安全 - 若只需单行对齐，用
justify-content或align-items，别碰align-content
flex-flow 看似简单，真正麻烦的是它隐式重置另一个值，而且错误不报错、只静默失效。最常出问题的地方不是写错语法，而是忘了它是个“全量覆盖”的简写——改一个，就得想清楚另一个要不要跟着变。 
