align-self没生效需先查三件事：父容器未设display: flex/inline-flex；交叉轴无明确尺寸（如height为auto且无内容撑开）；子项设置了margin: auto（在交叉轴方向会直接压制align-self）。
align-self 为什么没生效？先查这三件事
最常见的情况是：写了 align-self: center，但元素纹丝不动。这不是语法错，而是底层条件没满足。
- 父容器没设
display: flex或display: inline-flex——align-self只在 flex 上下文中有效 - 父容器交叉轴尺寸不可计算，比如高度是
auto且没内容撑开，此时“居中”无参考空间，视觉上就像没反应 - 该子项写了
margin-top: auto或margin-bottom: auto（row 方向）或margin-left: auto/margin-right: auto（column 方向）——margin: auto在交叉轴方向会直接压制align-self
align-self 和 align-items 的覆盖关系怎么理解
align-self 不是“增强版 align-items”，它是明确的覆盖机制：只要子项声明了非 auto 值，就无视父级 align-items 设置。
-
align-self: auto是默认值，等价于“继承父级align-items”，删掉它和设成auto效果一样 - 父级设了
align-items: flex-start，某子项加align-self: center→ 仅该项垂直居中，其余仍靠顶 - 这个覆盖只发生在交叉轴；主轴对齐（如左/右/居中）必须用
justify-content或margin-left: auto等方式控制
flex-direction: column 时 align-self 控制的是左右还是上下
它永远控制交叉轴，而交叉轴由 flex-direction 决定。所以当主轴是垂直方向（column），交叉轴就是水平方向 —— 此时 align-self: flex-end 表示靠右，不是靠下。
- 别记“
flex-end= 底部”，要记“flex-end= 交叉轴终点” - 对应地，
justify-content才管上下（主轴）；想让某项在 column 布局里“沉到底部”，得用margin-top: auto，不是align-self - 如果父容器宽度是
fit-content或未设宽，align-self: center可能看起来无效——建议加width: 100%或固定宽便于验证
多行 flex-wrap 场景下 align-self 还管用吗
管用，但作用范围被严格限定在“当前行”。它不会拉扯整行偏移，也不影响其他行，更不改变 align-content 对行组的控制。
- 某行只有一个子项，且设了
align-self: stretch（默认），而该子项没设高度 → 它会撑满**这一行的高度**，不是整个容器高度 - 同一子项在响应式断点下从第一行换到第二行，它的交叉轴参考系已变（比如从“容器底部”变成“第二行的底部”），视觉位置可能跳变
- 如果想让某项在多行中始终“贴着容器底边”，
align-self办不到，得结合margin-top: auto或绝对定位
真正容易被忽略的是：align-self 对齐的是子项的**盒模型边界**，不是它内部的文字或子元素。比如一个 align-self: center 的 div 里有文字，文字本身仍按默认 text-align: start 左对齐；要居中文本，还得单独加 text-align: center。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
