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 把按钮左右撑开——这两者互不干扰，也无需协调。
立即学习“前端免费学习笔记（深入）”；
