align-self 仅对直系网格项生效，失效主因是元素未满足网格项三条件：父为grid容器、自身为直接子元素、未脱离网格流；常见失效场景包括绝对定位、嵌套包裹、display: contents及无轨道定义。
align-self 为什么对某些元素完全没反应
根本原因不是属性写错了，而是那些元素压根不算“网格项”。align-self 只在满足三个硬性条件时才参与布局计算：父容器是 display: grid 或 display: inline-grid；子元素是该容器的**直接子元素**；子元素没有脱离网格格式化上下文。
常见失效场景：
- 子元素加了
position: absolute—— 它已退出网格流，align-self被浏览器直接忽略 - 中间嵌套了一层
div包裹，实际对齐目标不是直系子元素 - 用了
display: contents，该元素自身不生成盒，其子元素变成“伪直系”，但align-self不会向上冒泡生效 - 父容器虽写了
display: grid，但没定义任何轨道（如漏掉grid-template-columns或grid-auto-flow），浏览器不认为它启用了真正网格布局
align-self 生效但“看起来没变化”
最常被误判为“失效”的情况，其实是它确实生效了，只是视觉上被其他规则掩盖。典型表现是写了 align-self: center 却还是贴顶。
关键排查点：
-
align-items是stretch（默认值）且子元素没设height或min-height→ 子项被拉满整行高，“居中”发生在已填满的空间里，自然看不出位移 - 子元素所在网格区域（grid cell）本身高度为
auto且内容撑不满 → 实际可居中空间极小甚至为 0 - 父容器交叉轴（默认垂直方向）未设明确高度约束（如
height: 300px或min-height），浏览器无法计算居中基准 - 子元素自己设了
margin-top/margin-bottom，与align-self的作用方向冲突，造成错觉
跨行/跨列元素的 align-self 行为差异
跨行（grid-row: span 2）或跨列（grid-column: span 3）不会让 align-self 失效，但它对齐的目标变了：不再是单个轨道行高，而是整个合并后的网格区域高度。
这意味着：
- 如果跨行区域总高只有 60px，
align-self: center就是在这 60px 内居中，不是在整个容器高度里居中 - 若该区域因内容少而塌缩（比如只有一行文字 +
grid-row: span 2），实际区域高度可能仍接近单行文字高度，center效果就微弱到难以察觉 -
align-self: stretch在跨行时仍会拉伸填满整个合并区域，但前提是该区域有明确尺寸边界（否则仍会随内容收缩）
和 margin: auto 的优先级冲突
当 align-self 值为 stretch（默认）时，margin: auto 在交叉轴方向会被压制，不起作用；但一旦你显式设成 center、start 等非拉伸值，margin: auto 就能生效，并且它的优先级更高。
所以如果你同时写了：
.item {
align-self: center;
margin: auto 0;
}
最终效果由 margin: auto 0 主导，align-self 实际被忽略。调试时建议先注释掉 margin 规则，确认 align-self 是否能独立起效。
真正容易被忽略的是：align-self 的作用范围始终局限在它所属的那个网格单元格内，既不感知容器整体尺寸，也不响应“第几行”“最后一项”这类位置逻辑——它只认自己占的那块地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
