align-self 覆盖 align-items 的前提是父容器为 flex 布局、交叉轴有明确尺寸、子元素未脱离文档流；否则会退化为 auto 或失效。
align-self 可以覆盖父容器的 align-items，但只对单个 flex 项生效，且必须满足三个硬性条件：父容器是 flex、交叉轴有明确尺寸、子元素未脱离文档流。
align-self 覆盖 align-items 的前提是什么
它不是无条件覆盖。最常失效的原因是父容器没设 align-items —— 此时 align-self: center 会退化为 auto，等效于继承一个不存在的值，最终按 stretch 行为拉伸。另外两个关键点：
- 父容器必须有明确的交叉轴尺寸：比如
flex-direction: row时，需设置height或min-height；flex-direction: column时，则需width或min-width - 子元素不能是
position: absolute或float，否则已脱离 flex 流，align-self完全不作用 -
align-self: auto是默认值，它不“取消”覆盖，而是主动继承父级align-items；只有设成center、flex-end等非auto值才真正触发覆盖逻辑
flex-direction 改变后 align-self 控制哪个方向
它永远只管交叉轴，而交叉轴方向由 flex-direction 决定：
- 当
flex-direction: row（默认）→ 主轴水平 → 交叉轴垂直 →align-self控制上下对齐 - 当
flex-direction: column→ 主轴垂直 → 交叉轴水平 →align-self控制左右对齐 - 写
align-self: flex-end时，别想“底部”，要想“交叉轴终点”：在 column 布局里，它实际是靠右，不是靠下
多行 flex-wrap 场景下 align-self 还有效吗
有效，但作用范围受限：每行有自己的交叉轴线，align-self 只影响它所在那一行的对齐位置。这意味着：
- 如果某子项因换行到了第二行，它的
align-self: flex-end会让它在第二行的交叉轴末端对齐，而不是整个容器的底部 -
align-content（控制行与行之间分布）和align-self（控制项在本行内的位置）互不干扰，但若align-content: flex-end把所有行整体推到底部，再加align-self: flex-end就可能产生叠加偏移 - 当子项高度差异大，又用了
align-items: stretch，baseline值容易错位——因为基线对齐依赖文本内容，而拉伸后的容器可能让基线参考点漂移
为什么 align-self: center 有时看起来没居中
常见于两种情况：
- 父容器
height不足，或子元素自身设置了margin/padding，导致视觉偏移；此时检查计算后的实际高度和边距占用 - 子元素内无文本，或仅含
inline元素，baseline对齐可能被意外触发（尤其当父级align-items是baseline且未显式重置） - 使用了
transform: translateY()或其他定位手段干扰原始布局流，align-self仍按未变换前的位置计算对齐基准
最容易被忽略的是交叉轴尺寸的“隐式缺失”：开发者常以为 flex 容器自动撑开就有对齐空间，其实没有明确 height/min-height，浏览器就无法确定交叉轴的“终点”在哪，flex-end 和 center 都会失去参照系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
