先说一个不太容易注意到的细节：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 容器都是独立的布局单元，不能假设上层设置会“透传”下来。实际开发中最容易被忽略的是中间层的高度约束和对齐属性缺失——这两点往往直到页面内容变长或屏幕尺寸缩小时才会暴露出来，导致布局崩坏。
