align-self能覆盖align-items，前提是父容器为flex、交叉轴有明确尺寸、子项未脱离flex流；其auto值表示继承父级align-items，非重置；与margin: auto同用时后者优先。
align-self 覆盖 align-items 的前提条件
它不是写了就生效，而是必须同时满足三个硬性条件：父容器 display: flex 或 display: inline-flex；交叉轴有明确尺寸（比如 flex-direction: row 时要有 height 或 min-height）；子元素没脱离 flex 流（不能是 position: absolute、float，也不能在交叉轴方向写了 margin: auto）。任意一条不满足，align-self 就被浏览器静默忽略。
为什么写了 align-self: center 却没居中
最常见原因不是属性写错，而是视觉上“看不出效果”：
- 父容器高度为
auto，且子项内容又没撑开高度 → 没有“可居中的空间”，align-self: center实际已生效，但容器本身没高度，自然无从体现 - 子项设置了固定高度（如
height: 40px），同时又用了align-self: stretch→ stretch 失效，但你可能误以为是 center 没起作用 - 子项写了
margin-top: auto或margin-bottom: auto→ 它会直接抢占交叉轴控制权，覆盖align-self，此时元素会被顶到起点
align-self: auto 到底意味着什么
align-self: auto 不是“取消对齐”或“恢复默认”，而是显式声明“继承父级 align-items 值”。如果父容器没设 align-items，则按规范回退为 stretch。所以：
- 删掉
align-self和写align-self: auto效果完全一样 - 父容器
align-items: baseline，子项align-self: auto→ 子项走基线对齐，不是居中 - 想让某子项“回归统一”，不用删属性，直接设
align-self: auto更清晰
align-self 和 margin: auto 在交叉轴上的冲突
二者都可用于交叉轴定位，但优先级不同：margin: auto 在 flex 中有特殊语义，会消耗交叉轴剩余空间，优先级高于 align-self。实际表现是：
立即学习“前端免费学习笔记（深入）”；
-
align-self: center+margin-bottom: auto→ 元素被顶到交叉轴起点（相当于flex-start） - 想“把某一项推到底部”，用
margin-top: auto比align-self: flex-end更可靠 - 需要微调偏移量（比如下移 8px），只能靠
align-self配合margin数值，不能依赖margin: auto
真正容易被忽略的是：它只控制子元素盒子自身的对齐位置，不负责盒内内容（比如文字、图片）的对齐。想让文字在盒子里垂直居中，还得额外处理，比如给子项加 display: flex 和 align-items: center。
