align-self 失效的四大原因：父容器未设 display: flex/inline-flex；交叉轴无尺寸（如缺 height/min-height）；align-items: stretch 隐式拉伸覆盖效果；margin: auto 在交叉轴优先级更高而静默忽略 align-self。
父容器没开 Flex 布局是最隐蔽的失效原因
写了 align-self: center 却毫无反应，第一反应不该是查语法，而是打开 DevTools 看父元素的 display 值。它必须是 flex 或 inline-flex —— 缺一不可。哪怕只差一个分号、被 display: contents 或 visibility: hidden 干扰，align-self 就直接“失联”，浏览器连警告都不给。
常见误操作：
- 父元素写了
display: flex，但子元素其实是孙元素（中间隔了<div><p>...</p></div>），align-self只对**直接子元素**有效 - 用 JS 动态切换类名，但 class 名拼错或 CSS 优先级被覆盖，导致
display: flex实际未生效 - 父容器被上层
flex: 1包裹，但自身没设min-height: 0，高度塌缩为内容高度，交叉轴失去对齐基准
交叉轴没尺寸，align-self 就没参考系可对齐
align-self 控制的是子项在**交叉轴**上的位置，而“居中”“顶部”这些概念必须有明确的空间范围才能计算。如果父容器在交叉轴方向尺寸为 auto，它就等于没提供坐标系。
具体看方向：
- 当
flex-direction: row（默认）时，交叉轴是垂直方向 → 父容器必须有height或min-height（比如min-height: 100vh） - 当
flex-direction: column时，交叉轴是水平方向 → 父容器得有width或min-width - 即使写了
height: 400px，也要检查是否被max-height、overflow: hidden或外层约束意外截断 —— 在 DevTools 的 Computed 面板里确认最终生效的 height 值
align-items: stretch 暗中覆盖了 align-self 的视觉效果
父容器默认 align-items: stretch，它会强制子元素拉伸填满交叉轴。此时你写 align-self: center，其实已生效，但子元素被拉满后，“居中”和“拉满”看起来一模一样。
验证方法：给子元素加 outline: 1px solid red，观察 outline 是否撑满父容器高度。如果是，说明拉伸正在发生。
解法不是删掉 align-items，而是让子元素退出拉伸队列：
- 显式设置
align-self: flex-start或align-self: center（已写，但需配合下一条） - 给该子元素加
min-height: 0（关键！这是打破 stretch 隐式约束最有效的手段） - 或设
height: auto，但注意这可能影响内容自适应
margin: auto 在交叉轴上优先级更高
在 Flex 容器中，margin: auto 不仅能主轴居中，还能在交叉轴方向触发自动外边距分配 —— 而且它比 align-self 优先级高。只要子元素某侧 margin 是 auto，align-self 就会被浏览器静默忽略（DevTools 里该属性会显示为 strikethrough）。
典型冲突场景：
-
margin: auto→ 交叉轴 + 主轴都居中，align-self完全失效 -
margin: auto 0→ 仅主轴居中（水平），不影响align-self在交叉轴的表现 -
margin: 0 auto→ 同上，只影响主轴
调试时最简单的方法：临时注释掉所有 margin 相关声明，看 align-self 是否恢复作用。若目标只是单个子项居中，margin: auto 往往比 align-self 更直接可靠。
真正容易被忽略的是：align-self 不是“万能居中开关”，它只在特定上下文里起效；而失效往往不是因为写错了，而是前提条件缺了一环——比如父容器没高度、子元素被拉伸填满、或者 margin 抢先占了位。逐项排查这四点，比反复改值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
