怎样用CSS Flex处理复杂的层级布局？

Flex布局不继承flex-direction和align-items，每层需显式设置；flex:1在多层嵌套中易失控，需逐层约束高度；一维布局优先用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 容器都是独立单元，不能假设上层设置会“透传”下来。最常被忽略的是中间层的高度约束和对齐属性缺失——这两点往往直到内容变长或屏幕缩小时才暴露。