align-self 不生效的主因是父容器交叉轴无固定尺寸；其次被 align-items: stretch 拉伸掩盖；再者 margin: auto 会优先覆盖；最后父容器未启用 Flex 布局也会导致完全失效。
align-self 不生效，先看父容器有没有固定交叉轴尺寸
很多情况下 align-self 看起来“没反应”，不是属性写错了，而是它根本没机会起作用——align-self 控制的是子项在交叉轴上的对齐，但若父容器在交叉轴方向没有明确尺寸（比如高度为 auto），浏览器就无法计算“居中”“顶部”“底部”这些位置的基准，结果就是表现和预期脱节。
- 在
flex-direction: row（默认）时，交叉轴是垂直方向，此时需要父容器有明确的height或min-height，否则align-self: center或flex-end会“失效”（实际是无参考系可对齐） - 在
flex-direction: column时，交叉轴变成水平方向，此时需父容器有明确宽度（width或min-width）才能让align-self表现出左右对齐效果 - 即使设置了
height，也要确认它没被max-height、overflow或父级约束意外截断；用开发者工具检查 computed 的height值是否如你所设
align-self 被 align-items: stretch 暗中覆盖
align-items 默认值是 stretch，而这个行为会强制子元素拉伸填满交叉轴——只要子项没设高度/最小高度，align-self: center 就会被“视觉掩盖”：它确实生效了，但子项被拉满后，居中看起来和拉伸一样。
- 验证方式：给子元素加
outline: 1px solid red，再看它是否真被拉高；如果 outline 框占满容器高度，那align-self就是在一个“已满”的空间里居中，自然看不出变化 - 解决办法不是删掉
align-items，而是给子项加align-self: flex-start或显式设置height: auto/min-height: 0来解除拉伸 - 特别注意：
min-height: 0在 flex 子项中很关键，它能打破align-items: stretch对最小尺寸的隐式约束
margin: auto 会直接压制 align-self
在 flex 容器中，margin: auto 在交叉轴方向有天然居中能力，而且它的优先级高于 align-self。一旦子项某侧 margin 是 auto，align-self 就会被忽略，连浏览器 devtools 都可能显示它“被覆盖”。
-
margin: auto 0→ 交叉轴（垂直）居中，主轴（水平）不居中；此时align-self完全无效 -
margin: 0 auto→ 主轴居中，不影响align-self在交叉轴的表现 - 调试时可临时注释掉
margin规则，看align-self是否恢复作用；想稳定控制单个子项位置，margin: auto往往比align-self更直接可靠
父容器没开 Flex 布局是最隐蔽的失效原因
align-self 只对 flex 子项有效，也就是 display 为 flex 或 inline-flex 的**直接父元素**的子元素。它不是通用居中属性，也不是 Grid 里的逻辑。
立即学习“前端免费学习笔记（深入）”；
- 常见误判：父元素写了
display: flex，但被后续样式（如display: contents、display: none）覆盖，或被position: absolute的子项干扰渲染流 - 检查 computed styles 里父元素的
display值是不是真的flex，而不是继承来的、或被媒体查询条件屏蔽的 - 如果父元素是
grid或block，align-self会被完全忽略——浏览器不报错，也不警告，只是静默失效
auto + align-items: stretch + 子项没设 min-height + 又写了 margin: auto，这时候改任意一项都可能让 align-self “突然生效”，但你很难定位到底是哪一环松动了。 
