flex-direction 唯一决定主轴方向，不继承父级，嵌套时子容器必须显式设置；其四个值 row、row-reverse、column、column-reverse 分别定义主轴走向，直接影响 justify-content 和 align-items 的作用轴。
flex-direction 嵌套时主轴方向会翻转，必须手动重置
父容器设 flex-direction: column，子容器再设 display: flex，它的默认主轴仍是 row —— 不会继承父级方向。这是新手最常误以为“自动继承”的地方。
嵌套后若不显式声明子容器的 flex-direction，会导致布局错乱：比如想让子项水平排列，结果却垂直堆叠（因为父容器高度被压缩，子容器又没设方向，row 在窄空间里可能触发换行或溢出）。
- 子容器必须单独设置
flex-direction，不能依赖父级 - 常见组合：
column（父）→row（子），或row（父）→column（子），用于构建「列表+详情」或「导航栏+菜单项」结构 - 用
flex-direction: inherit无效 —— CSS 规范明确禁止该属性继承
嵌套层级超过两层时，align-items 和 justify-content 容易互相干扰
三层嵌套（如 .layout → .section → .item-group → .item）中，align-items: center 在中间层生效后，会强制所有后代项目在交叉轴上对齐；如果下一层又设了 justify-content: flex-end，而主轴方向已变，就可能出现“明明写了居中，却贴右”的现象。
根本原因是：每层的主轴/交叉轴由该层自己的 flex-direction 决定，上下层轴线不自动对齐。
- 第二层容器设
flex-direction: column→ 它的justify-content控制垂直方向，align-items控制水平方向 - 第三层若仍为
column，则它的justify-content继续控制垂直方向，但若父层高度未固定，它可能撑不满，导致justify-content失效 - 推荐做法：只在真正需要对齐的那层设
justify-content/align-items，其他层保持默认或设为stretch
响应式切换中，flex-direction 嵌套需配合 flex-wrap 避免内容截断
移动端把父容器从 row 切成 column，子容器若仍是 row 且未设 flex-wrap: wrap，当子项数量多、宽度大时，会直接溢出容器，而不是换行。
这不是 bug，而是 flex 的默认行为：nowrap 优先保内容完整，宁可溢出也不折行。
- 只要子容器内项目可能动态增减，就应提前设
flex-wrap: wrap - 媒体查询中改
flex-direction时，顺带检查子容器是否需要同步调flex-wrap或align-content - 特别注意表单类布局：输入框 + 按钮同行，小屏切
column后，按钮容易被挤到看不见，加flex-wrap: wrap+align-content: flex-start更稳妥
模块化组件中，避免在子容器上滥用 flex-grow / flex-shrink
一个卡片组件内部用了 flex: 1，嵌套进另一个 flex 容器后，它可能被意外拉伸或压缩 —— 尤其当外层容器设置了 align-items: stretch（默认值）且高度未限定时。
flex-grow 的计算基于「剩余可用空间」，而嵌套后这个“剩余空间”受多层约束，极易失准。
- 模块化设计时，子组件应尽量使用固定尺寸或
max-width/max-height限制弹性行为 - 外层容器若需分配空间，优先用
flex-basis+ 显式宽度，而非全靠flex: 1 - 调试技巧：临时加
outline: 1px solid red到各层容器，能快速看出哪一层在拉伸或压缩内容
嵌套 flex 最难 debug 的不是语法写错，而是某一层没设高度、没关 overflow、或误以为 align-items 会跨层生效 —— 这些细节不报错，但布局会静默崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
