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 控制。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 常见错误：.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 容器都是独立单元，不能假设上层设置会“透传”下来。最常被忽略的是中间层的高度约束和对齐属性缺失——这两点往往直到内容变长或屏幕缩小时才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！