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等边界问题
