内层flex-direction不继承父级，必须显式设置；子容器默认为row，即使父容器是column，否则导致排版错乱、高度塌陷、对齐失效。
内层 flex-direction 不继承父级，必须显式设置
Flex 嵌套时排版错乱，最常见原因是误以为子容器会自动沿用父容器的 flex-direction。实际上，规范明确禁止该属性继承，子容器默认仍是 flex-direction: row，哪怕父容器是 column。结果就是：父层竖着排，子层横着挤，高度塌陷、内容溢出、对齐失效全跟着来。
浏览器开发者工具里看 computed styles，常会发现子容器的 flex-direction 是 row 而不是你“以为”的 column —— 这就是根因。
- 每层
display: flex容器都得单独写flex-direction，不能省 - 父子方向不一致时（比如父
column+ 子row），要同步检查justify-content和align-items的作用轴是否匹配 - 别用
flex-direction: inherit，CSS 不支持，写了也无效
flex-direction 切换后 justify-content/align-items 作用轴翻转
justify-content 和 align-items 的行为完全取决于当前容器的 flex-direction，不是固定“水平”或“垂直”。一旦子容器设了 flex-direction: column，它的 justify-content 就管垂直方向，align-items 管水平方向 —— 和父层相反。如果没意识到这点，就会出现“写了 justify-content: center 却没居中”的假象。
- 父容器
flex-direction: row→justify-content控制水平，align-items控制垂直 - 子容器
flex-direction: column→justify-content控制垂直，align-items控制水平 - 嵌套超过两层时，建议只在真正需要对齐的那层设这两个属性，其他层保持默认（
stretch或flex-start）
子容器设 display: flex 后，父级 align-items 失效
父容器的 align-items: center 只影响它的直接子元素在交叉轴上的对齐；一旦某个子元素自己也成了 flex 容器，它内部的子项就彻底脱离父级的对齐控制。这不是 bug，是 Flex 作用域的天然边界。
典型表现：卡片整体设了 align-items: center，但卡片里一个按钮始终靠左，怎么调都不动 —— 因为按钮被包在了另一个 div 里，而那个 div 没开 display: flex，也没设自己的 align-items。
- 对齐链路是断点式的：每层 flex 容器只管自己的直接子项
- 中间夹一层非 flex 元素（比如普通
div或span），对齐就中断 - IE11 需额外加
display: -ms-flexbox，且常需兜底height: 100%才能触发对齐
响应式中 flex-direction 嵌套需配合 flex-wrap 防溢出
移动端把父容器从 row 切成 column，子容器若仍是 row 且没设 flex-wrap: wrap，当子项数量多或内容宽，就会直接横向溢出容器，而不是换行。尤其在卡片列表、导航菜单这类场景下，视觉上就是内容被截断或滚动条突兀出现。
- 子容器设
flex-direction: row时，记得加flex-wrap: wrap应对窄屏 - 若子项有固定宽度（如
width: 200px），要配min-width: 0防止 flex-shrink 失效导致溢出 - 用
gap替代margin控制间距，避免 margin 折叠干扰 flex-wrap 行为
display、flex-direction、justify-content 的 computed 值是否真如所愿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
