align-self能覆盖align-items，因其是flexbox规范定义的单个flex项高优先级覆盖属性；显式设非auto值即跳过继承直接生效，auto则继承父级align-items；生效需父容器为flex、交叉轴尺寸明确、子项未脱离flex流且未用margin:auto。
align-self 能覆盖父级 align-items，是因为它被 CSS Flexbox 规范明确定义为“单个 flex 项专属的高优先级覆盖属性”，不是 bug，是设计如此。
align-self 的覆盖机制是怎么工作的
它不是简单地“赢过”align-items，而是 Flexbox 布局算法中明确规定的层叠顺序：当一个 flex 项显式设置了非 auto 的 align-self 值（如 center、flex-end），渲染引擎会跳过继承逻辑，直接采用该值作为该子项在交叉轴上的对齐依据。其余未设置或设为 auto 的子项，仍按父容器的 align-items 计算。
关键点在于：align-self: auto 不等于“没写”，而是主动继承——删掉 align-self 和写 align-self: auto 效果完全一样。
为什么有时候写了 align-self 却没反应
这不是优先级失效，而是前提条件不满足。常见真实失效场景包括：
- 父容器没设
display: flex或display: inline-flex - 父容器交叉轴尺寸不可计算：比如
flex-direction: row时没设height或min-height，导致“居中”无参照空间 - 子项脱离了 flex 流：例如加了
position: absolute，此时align-self完全无效 - 子项写了
margin: auto或margin-top/bottom: auto（在row方向下）：它会直接接管交叉轴剩余空间分配，覆盖align-self - 子项本身有固定高度（如
height: 50px），而父容器又没足够高度，align-self: center看起来就像“没动”
align-self 和 margin: auto 混用时谁说了算
如果两者同时出现在同一个子项上，margin: auto 在交叉轴方向拥有更高执行权重。例如：
div.item {
align-self: center;
margin-bottom: auto;
}
结果是元素被顶到交叉轴起点（即“顶对齐”），align-self 彻底被忽略。这不是冲突，而是规范行为：margin: auto 在 flex 中语义是“占满可用空间”，它比对齐更底层。
调试时若发现 align-self 失效，第一反应应是检查是否误加了 margin 相关声明。
flex-direction 改变后，align-self 控制的方向跟着变
它永远只作用于交叉轴，而交叉轴由 flex-direction 决定：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 →align-self: flex-end= 底部对齐 -
flex-direction: column→ 交叉轴是水平方向 →align-self: flex-end= 右侧对齐
别记“上下左右”，记住“交叉轴终点”。这也是为什么很多人在改 flex-direction 后发现 align-self 表现突变——不是属性出错，是轴变了。
真正容易被忽略的是：align-self 只管交叉轴，且必须依赖父容器有可计算的交叉轴尺寸。没有 height/min-height（row 方向）或 width/min-width（column 方向），它就失去锚点，哪怕语法完全正确，也什么都不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
