嵌套flex容器的主轴方向不继承而独立，每层需显式设置flex-direction；justify-content和align-items始终分别作用于当前容器主轴与交叉轴；align-self仅覆盖直系子项的align-items，对深层嵌套无效。
嵌套 flex 容器的主轴方向会叠加，不是继承
外层 display: flex 的 flex-direction 决定子项排列方向，但子项自己若也是 flex 容器，它的 flex-direction 独立生效——不会“延续”外层方向。比如外层是 column，内层仍可设 row，两者互不干扰。
常见错误是以为嵌套后子容器自动沿父容器主轴排布，结果发现文字横着跑、按钮堆成一列却对不齐，其实是忘了给内层显式设 flex-direction。
- 外层
flex-direction: column→ 子项垂直堆叠 - 子项加
display: flex但没设方向 → 默认row（水平），与外层垂直方向正交 - 想让子项内部也垂直排？必须写
flex-direction: column
justify-content 和 align-items 在嵌套中作用对象不同
justify-content 总是对齐当前容器的主轴，align-items 总是对齐交叉轴——无论嵌套几层，这个规则不变。关键在于：每层容器的主轴/交叉轴由它自己的 flex-direction 决定。
例如外层 flex-direction: row，则它的 justify-content 控制水平对齐，align-items 控制垂直对齐；而内层若为 column，它的 justify-content 就变成控制垂直对齐，align-items 反而管水平。
立即学习“前端免费学习笔记（深入）”；
- 别用“外层居中了，内层就该自动居中”这种直觉——每层都要单独配对齐属性
- 嵌套越深，越容易混淆哪层该调
justify-content、哪层该调align-self - 调试时可临时加
outline: 1px solid red看清每层容器边界和对齐基准线
align-self 覆盖 align-items，但只对直接子项生效
align-self 是设在 flex 项目（即子元素）上的，用来覆盖父容器的 align-items。它只影响该元素在父容器交叉轴上的位置，对更深层嵌套无穿透力。
比如父容器设了 align-items: center，某个子项是按钮且需顶部对齐，就给它加 align-self: flex-start；但如果这个按钮内部还有个图标 flex 容器，图标的对齐完全不受该 align-self 影响——它只听自己父容器（即按钮）的 align-items。
-
align-self不能写在嵌套的子容器上“间接影响孙子”，只能作用于直系子项 - 若想让某块区域整体偏移，优先考虑给该区域容器加
margin或用transform，比层层调align-self更可控 - 注意
align-self: stretch是默认值，但若父容器交叉轴尺寸未定义（如高度 auto），stretch 可能无效
flex-wrap 和 align-content 在多行嵌套中容易被忽略
当嵌套 flex 容器本身内容超长、触发 flex-wrap: wrap 时，align-content 才起作用——它控制的是多行之间的间距分布，和 align-items 完全无关。很多人调了半天 align-items 发现换行后上下空隙不变，就是没意识到该用 align-content。
- 只有
flex-wrap: wrap或wrap-reverse时，align-content才有效 - 单行 flex 容器中设
align-content完全无效果，CSS 引擎会静默忽略 - 嵌套场景下，外层 wrap 后想控制行间距？外层设
align-content: space-between；内层 wrap？同样逻辑，各自独立配置
嵌套 flex 最难的不是写法，而是每层的主轴/交叉轴随 flex-direction 动态切换，稍不注意就对着错的轴在调参数。动手前先用开发者工具 hover 每层容器，看清楚当前主轴指向哪边，比硬记规则更可靠。
