align-self能覆盖align-items，因为它是专为单个flex项设计的高优先级覆盖属性，规范赋予其高于align-items的层叠权重；显式设非auto值即生效，auto则继承父级align-items；需满足父容器为flex、有明确交叉轴尺寸、子项未脱离flex流三个前提。
align-self 为什么能覆盖 align-items
因为它是专为单个 flex 项设计的高优先级覆盖属性，CSS Flexbox 规范明确赋予它比容器级 align-items 更高的层叠权重。只要子元素显式设置了非 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 失效的三个硬性前提
它不是无条件生效。必须同时满足以下三点，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）
align-self 和 margin: auto 谁赢
如果一个子项同时写了 align-self: center 和 margin-bottom: auto，后者会完全压制前者，导致元素被顶到交叉轴起点（即“顶对齐”）。这是因为 margin: auto 在 flex 中有特殊语义：它会消耗交叉轴剩余空间，优先级高于 align-self。
- 调试时若发现
align-self没反应，第一反应应是检查是否误加了margin: auto或margin-top/bottom: auto - 想精确微调位置，用
align-self；想“把某一项挤到末尾”，直接用margin: auto更直观 - 二者混用不是错误，但目的要明确：比如
margin-top: auto把项推到底部，再加align-self: flex-end就多余了
flex-direction 决定，align-self 永远只管它，这点最容易被忽略——不是记“上下左右”，而是盯住当前哪条是交叉轴。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
