嵌套flex容器合法但需逐层配置：子容器不继承父级flex-direction和align-items，须显式设置；flex:1在多层嵌套中易失控，需确保每层有明确高度来源；收缩受限时应设min-width:0或min-height:0。
嵌套 flex 容器本身是合法且常见的，但需明确主轴方向继承关系
Flexbox 的嵌套没有语法限制，display: flex 可以任意层级嵌套。关键在于：**子容器的 flex-direction 默认是 row，不会自动继承父容器的方向**。这意味着即使父容器是垂直布局（flex-direction: column），它的直接子元素作为 flex 容器时，仍会默认横向排列——除非你显式设置。
常见误判是以为“父列子就自动列”，结果内层内容横着挤成一行，高度塌陷。解决方式很简单：
- 每层 flex 容器都独立设置
flex-direction、justify-content、align-items - 避免依赖“继承”，把每层当作独立布局单元来配置
- 用浏览器开发者工具检查每一层的 computed
flex-direction，确认是否符合预期
子容器设为 display: flex 后，其子元素不再受父级 align-items 影响
这是最容易被忽略的布局断裂点。父容器的 align-items: center 只作用于它的**直接子元素**；一旦某个子元素自己也成了 flex 容器，它内部的对齐就得靠它自己的 align-items 和 justify-content 控制。
例如：
立即学习“前端免费学习笔记（深入）”；
.outer { display: flex; align-items: center; }
.inner { display: flex; } /* 此时 .inner 的对齐完全不响应 .outer 的 align-items */
所以如果你希望内层内容也垂直居中，必须写：
