align-items仅作用于Flex容器的直接子元素，不穿透影响孙子元素；每层需独立设置对齐属性，align-self可覆盖父级align-items实现单个子项微调。
flex容器的align-items对子元素生效，但不影响孙子元素
嵌套Flex布局中，align-items只作用于**直接子元素**，不会穿透到更深层级。比如外层容器设了 align-items: center，内层Flex容器（作为外层的子项）会被垂直居中；但内层容器自己的子元素是否居中，得看它自己有没有设 align-items。
常见错误是只在外层设对齐，结果孙子元素完全没反应——因为内层容器默认是 align-items: stretch，且它自身作为块级元素被居中后，内部仍按默认行为拉伸子项。
- 外层容器控制「内层容器」的位置
- 内层容器必须显式设置
align-items或justify-content才能控制其子元素 - 如果内层容器高度未定义（比如内容撑开），
align-items: center可能无效——需确保它有明确高度或min-height
justify-content和align-items在嵌套中各自独立作用
justify-content 水平对齐子项，align-items 垂直对齐子项，两者在每一层Flex容器中都只管自己的直接子元素。没有继承性，也没有跨层联动。
例如：外层用 flex-direction: column + justify-content: center 把内层容器垂直居中；内层用 flex-direction: row + justify-content: space-between 把按钮左右撑开——这两者互不干扰，也无需协调。
立即学习“前端免费学习笔记（深入）”；
- 每层都应单独考虑「这一层的子元素要怎么排」
- 不要指望父层的
justify-content影响孙层的水平位置 - 若想整体居中一个深层结构，更可靠的方式是让中间层也设
display: flex并配好对齐属性，而不是依赖父层“透传”
align-self可覆盖align-items，适合单个子项微调
当内层Flex容器中某个子元素需要和其他兄弟不同对齐时，不用改整个容器的 align-items，直接给那个元素加 align-self 即可。它会覆盖父容器的 align-items 设置。
典型场景：表单里大部分输入框垂直居中，但提交按钮想底部对齐；或者卡片中标题居顶、内容居中、操作按钮靠底。
-
align-self: flex-start/flex-end/center/stretch等值均有效 - 注意：仅对 Flex 子项生效，普通块元素加了无效
- 如果父容器是
flex-direction: column，align-self控制的是水平方向（即 cross axis 变成水平轴）
嵌套Flex性能与可维护性隐患
三层及以上 Flex 嵌套不是语法错误，但容易导致对齐逻辑分散、调试困难。浏览器渲染时每层都要计算主轴/交叉轴，深度嵌套可能增加 layout 开销，尤其在动态内容或频繁重排场景下。
更清晰的做法是：把对齐责任收束到关键层级，用 margin: auto 或 place-self（配合 Grid）替代冗余嵌套；或者用 display: contents 让某层“消失”于布局树中（兼容性需查 display: contents 支持情况）。
- 两层 Flex 嵌套基本安全；三层起就要问：是不是能扁平化？
- 避免为“看起来整齐”而嵌套，比如只为给一个按钮加
align-self就包一层Flex容器 - Chrome DevTools 的 Layout Inspector 能直观看到每层的 cross/main size，比猜更可靠
