align-self 是 flex 项目在交叉轴上独立对齐的唯一属性，仅当父容器为 flex 上下文时生效，优先级高于 align-items，取值同 align-items 但作用于单个项目。
align-self 是唯一能直接让某个 Flex 项目“脱离集体对齐”的属性，它不改变其他项目，只作用于自身，在交叉轴（侧轴）上生效。
align-self 只在 Flex 容器内有效
如果父元素没设 display: flex 或 display: inline-flex，align-self 完全无效，浏览器会忽略它。常见错误是只给子元素加 align-self: center，却忘了给父容器加 display: flex。
- 必须确保父容器是 Flex 上下文，否则属性被静默丢弃
- 它不影响主轴对齐，主轴要用
justify-content或（注意）justify-self—— 但后者在 Flex 中不被支持，仅 Grid 支持justify-self - 即使容器设置了
flex-direction: column，align-self依然控制的是交叉轴：此时主轴是垂直方向，交叉轴变成水平方向，align-self: center就会让元素水平居中
auto 是默认值，但行为容易误判
align-self: auto 不等于“无效果”，它表示继承父容器的 align-items 值。如果父容器没设 align-items，则按默认值 stretch 处理 —— 这就是为什么没写 align-self 的子项常常被拉高填满容器。
- 想让某子项“不拉伸”，又不想硬编码
center或flex-start，可显式写align-self: auto并确保父容器有明确的align-items - 若父容器
align-items: baseline，子项设align-self: auto就会参与基线对齐；设align-self: stretch则强制拉伸，覆盖基线行为 -
initial和inherit很少用，initial相当于auto，inherit是从更上层祖先继承（不是父容器），容易出意外
常见取值的实际表现与陷阱
align-self 的取值和 align-items 完全一致，但作用粒度更细。最容易踩坑的是 stretch 和 baseline。
-
stretch：仅当子项在交叉轴方向**没有固定尺寸**（比如没设height或width）时才拉伸；一旦写了height: 40px，stretch就失效 -
baseline：依赖文字内容和font-size、line-height，不同字体或字号可能导致对齐错位；多个行内元素混排时尤其不稳定 -
flex-start/flex-end的方向取决于flex-direction：若为column，flex-start是顶部对齐；若为column-reverse，flex-start反而对齐底部
和 align-items 冲突时谁赢？
align-self 永远优先于 align-items，这是它的设计目的。但要注意：这个“覆盖”只发生在当前元素渲染时，不改变容器的 align-items 计算逻辑。
- 容器设了
align-items: flex-start，某个子项设align-self: center→ 该子项居中，其余仍靠起点对齐 - 如果子项同时用了
margin（比如margin-top: auto），它会和align-self共同作用，但margin: auto在交叉轴上只有在stretch模式下才可能生效，行为复杂，建议避免混用 - 不要指望
align-self能替代margin做微调：它只提供几种离散对齐方式，精细偏移得用transform或padding
真正难的不是记住取值，而是理解交叉轴方向随 flex-direction 动态变化，以及 stretch 对尺寸的强依赖 —— 这两点漏掉一个，对齐就容易跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
