CSS Flex如何处理复杂层级布局？

在 CSS Flex 布局中，有一个容易被忽视的细节：flex-direction 和 align-items 并不会自动继承到子容器，每层都需要手动设置。而 flex: 1 在多层嵌套环境下特别容易失控，必须逐层约束高度。至于何时选择 Flex、何时使用 Grid，一个简单的判断标准是：一维布局优先用 Flex，二维结构推荐 Grid。

flex-direction 不会继承，每层都必须手动设置

许多人误以为父容器设置 flex-direction: column 后，子容器内的 Flex 项目会自动垂直排列——实际上并不会。子容器默认使用 flex-direction: row，导致内容横向挤成一行，高度塌陷，只有在开发者工具中查看 computed 值才能发现异常。

• 在浏览器开发者工具中，逐层检查每个容器的 flex-direction 值，确认是否符合预期
• 即便只嵌套一层，也需显式声明 .inner { display: flex; flex-direction: column; }
• 不要依赖“看起来应该这样”，Flex 布局本身不提供方向继承机制

align-items 仅作用于直接子元素

父容器的 align-items: center 对孙级元素完全无效。一旦某个子元素自身也设置为 display: flex，其内部项目的对齐方式必须由它自己的 align-items 和 justify-content 控制。

• 常见错误：.outer { align-items: center; } 配合 .inner { display: flex; } 时，内层内容不会居中
• 正确写法：.inner { display: flex; align-items: center; justify-content: center; }
• 嵌套层级越深，越需要逐层补全对齐控制；漏掉一层，就可能错位一层

flex: 1 在多层嵌套中容易失控

flex: 1 虽然写法简洁，但在两层以上嵌套时极易引发高度坍缩或无限拉伸——尤其当某一层没有明确的高度参考时。

• flex: 1 本质是 flex: 1 1 0，它依赖父容器存在可分配的主轴空间；若父容器高度由内容撑开，则无空间可分
• 跨两层使用 flex: 1 时，中间每一层都必须具有高度约束：例如 height: 100vh、min-height: 0，或上层也使用了 flex: 1
• 调试技巧：为每层 Flex 容器临时添加 outline: 1px solid red，观察实际占位是否与预期一致

该用 Grid 的地方不要硬套 Flex

Flex 是一维布局工具，适合处理行或列的局部控制；Grid 才是二维结构的天然选择。如果整个页面强行拆成多层 Flex，不如外层用 display: grid 划分区域，内层再用 Flex 组织具体内容。

• 例如三栏后台页面：外层使用 grid-template-areas: "header header header" "sidebar main main" "footer footer footer"
• 侧边栏内部用 Flex 垂直堆叠菜单项，主内容区域用 Flex 分配头部、主体和底部
• 过度嵌套 Flex 容器不仅难以维护，还会放大 min-width: 0、overflow 等边界问题

嵌套本身没有问题，但每一层 Flex 容器都是独立的布局单元，不能假设上层设置会“透传”下来。最容易被忽略的是中间层的高度约束和对齐属性缺失——这两点往往直到内容变长或屏幕缩小时才会暴露出来。