align-self能覆盖align-items，因为它是专为单个flex项设计的高优先级覆盖属性，显式设置非auto值（如center）即生效；其默认值auto表示继承父级align-items，而非重置；生效需满足三前提：父容器为flex、交叉轴有明确尺寸、子项未脱离flex流；且始终只作用于交叉轴，方向由flex-direction决定。
align-self 为什么能覆盖 align-items
因为它是专为“单个 flex 项”设计的覆盖属性，优先级天然高于容器级的 align-items。CSS Flexbox 规范明确赋予 align-self 更高的层叠权重——只要子元素显式设置了非 auto 值（比如 center、flex-end），它就立即接管该元素在交叉轴上的对齐行为，其余子项仍按 align-items 统一处理。
align-self: auto 不是“取消”，而是继承
align-self 的默认值是 auto，它不表示“无效”或“重置”，而是主动继承父容器的 align-items 值。如果父容器没设 align-items，则默认为 stretch，此时 align-self: auto 等效于 stretch。
- 写
align-self: center→ 强制居中，无视父级设置 - 只写
align-self: auto（或干脆不写）→ 完全跟随父级align-items - 父级
align-items: baseline，子项align-self: auto→ 子项也走基线对齐
常见失效原因不是语法错，而是前提不满足
align-self 不是无条件生效。它只在严格满足以下三个条件时才真正起作用：
- 父容器必须是
display: flex或display: inline-flex - 父容器需有明确的交叉轴尺寸：例如
flex-direction: row时要有height或min-height；flex-direction: column时要有width或min-width - 子元素不能脱离 flex 流：即不能是
position: absolute、float，也不能在交叉轴方向写了margin: auto（后者会直接覆盖align-self）
flex-direction 改变后，align-self 控制的方向跟着变
它永远只管交叉轴，而交叉轴方向由 flex-direction 决定：
-
flex-direction: row（默认）→ 交叉轴垂直 →align-self: flex-end= 靠下 -
flex-direction: column→ 交叉轴水平 →align-self: flex-end= 靠右
别记“上下左右”，记住“交叉轴终点”。很多视觉偏差，其实是因为没意识到当前交叉轴到底是哪个方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
