align-self 优先级高于 align-items，会覆盖父容器的交叉轴对齐设置；若子项显式设了 align-self（如 flex-start）或自身有 height/min-height，则 stretch 失效。
align-self 覆盖 align-items 导致子项高度“不听指挥”
父容器设了 align-items: stretch，但某个子元素就是不拉高——八成是它自己写了 align-self: flex-start 或 align-self: center。这个属性优先级高于父级的 align-items，一旦显式声明，就直接接管该子项在交叉轴上的对齐行为，stretch 彻底失效。
- 用开发者工具选中那个“不听话”的子元素，在 Styles 面板里搜
align-self，看是否被显式设置（包括从类名、内联样式或继承而来） - 常见误写：
align-self: auto看似中立，实则会回退到父级align-items值；但若父级是flex-start，那它就不会拉伸 - 框架或重置 CSS 可能悄悄给某些标签加了默认
align-self，比如button或img在部分 UI 库里被设为flex-start - 临时验证：在子元素样式里加
align-self: stretch !important;，如果立刻等高，说明就是它在干扰
align-self: stretch 在子元素有 height 时自动失效
align-self: stretch 不是万能拉伸开关。只要子元素自身设置了 height、min-height 或 max-height，浏览器就会认为“你已经有主意了”，直接跳过 stretch 计算。此时哪怕 align-self 值是 stretch，也形同虚设。
- 检查子元素 computed 样式里的
height是否为具体值（如120px、50%），而不是auto - 特别注意：
height: 100%在父容器高度未定义时算出来是0px，但它仍会阻止stretch生效 - 替换方案：删掉
height，改用flex: 1（等价于flex: 1 1 0），既保持拉伸语义，又不触发冲突 - 图片、iframe 等替换元素常自带固有尺寸，即使没写
height，也可能隐式阻碍 stretch，可加height: 100%; min-height: 0;强制参与计算
嵌套 Flex 容器中 align-self 的作用域陷阱
当子元素本身也是 display: flex 容器时，它的 align-self 控制的是它在**外层容器交叉轴上**的位置和拉伸行为，而不是它内部子项的高度。很多人误以为在这里设 align-self: stretch 能让内层内容填满，其实完全不影响内层布局逻辑。
- 外层
.outer { display: flex; align-items: stretch; }→ 控制所有直接子项（含那个嵌套 flex 容器）在垂直方向是否拉伸 - 内层
.inner { display: flex; }→ 它自身的高度由外层决定，但它内部子项是否等高，得靠它自己的align-items和子项的height/flex设置 - 典型错误：给
.inner设align-self: stretch后，发现里面文字还是参差不齐 → 此时要查的是.inner的align-items，不是它的align-self - 安全做法：在嵌套 flex 容器上统一加
min-height: 0，避免其默认最小高度干扰外层 stretch
Safari 14–15.6 对 align-self: stretch 的兼容性断层
这些旧版 Safari 中，即使父容器明确设了 height: 100vh 且子元素 align-self: stretch，子项仍可能无法拉伸。根本原因是 Safari 没把 flex 容器识别为“具备明确高度上下文”的祖先，导致 stretch 失去参照基准。
立即学习“前端免费学习笔记（深入）”；
- 现象：Chrome/Edge 正常拉伸，Safari 里子项高度为
auto，仅包裹内容 - 绕过方式：不依赖
align-self，改用flex: 1（它在 Safari 中兼容性更稳） - 若必须用
align-self，需确保父容器不仅有height，还要加min-height: 0和overflow: hidden，部分版本对此敏感 - 检查时别只信样式面板——打开 Safari 的 Computed 面板，确认
height的实际计算值是不是一个非auto数值（如680px）
align-self，而是写了却没意识到它正被别的规则悄悄覆盖，或者写对了但子元素自己先用 height 把路堵死了。 
