align-self 和 justify-self 必须写在子元素上，仅对网格项生效；父容器需设 display: grid 且定义轨道，否则无效；二者分别控制块轴（垂直）和行内轴（水平）对齐，优先级高于容器级对齐属性。
align-self 和 justify-self 必须写在子元素上
这两个属性只对网格项（grid item）生效，写在容器上完全没用。常见错误是把 align-self: center 加到 .container 上，结果毫无反应——它只接受子元素选择器。
必须确保父容器已声明 display: grid 且定义了至少一个轨道，比如 grid-template-columns: 1fr；否则浏览器不会生成真正的网格上下文，align-self 就会被忽略。
- 不生效的典型组合：
display: grid但没设grid-template-columns或grid-template-rows - 脱离网格流的元素（如
position: absolute、float、display: contents）无法使用align-self -
place-self是简写，会同时覆盖justify-self和align-self，混用时容易被意外覆盖
align-self 控制垂直方向，justify-self 控制水平方向
别被名字带偏：虽然都叫 “self”，但轴向完全不同。在默认书写模式（LTR + grid-auto-flow: row）下：
-
align-self管的是**块轴（block axis）** → 垂直对齐（顶部/居中/底部） -
justify-self管的是**行内轴（inline axis）** → 水平对齐（左/居中/右） - 两者优先级高于容器上的
align-items和justify-items，直接覆盖
例如容器设了 align-items: stretch，给某个按钮加 align-self: end，它就会贴着单元格底部，其余项仍拉伸。
立即学习“前端免费学习笔记（深入）”；
stretch 是默认值，小心它“撑满”破坏布局
align-self: stretch（也是默认值）会让元素高度拉伸填满整个网格区域，忽略自身 height 和 margin（除了 auto margin）。这在卡片布局里常导致文字被压扁或图标变形。
- 想让内容按自身尺寸显示？显式设
align-self: start或justify-self: start - 配合
margin-top: auto可实现底部对齐，但前提是元素没设align-self: stretch，否则 margin 无效 - IE 完全不支持
*-self属性，需降级方案（如用margin: auto+display: grid的老式兼容写法）
self-start / self-end 不是 left / right，而是依赖 writing-mode
self-start 和 self-end 是相对于元素自身的书写方向起点/终点，不是绝对方向。中文默认 LTR，所以 self-start ≈ start ≈ 左侧；但若某子项设了 writing-mode: vertical-rl，self-start 就变成顶部了。
日常开发中多数场景用 start/end 更直观稳定，除非你明确需要响应多语言或竖排文本。
真正容易被忽略的点是：对齐行为始终发生在**该子项所占据的网格区域内部**。如果它用 grid-area 跨了三行，align-self: center 是在这三行组成的矩形区域内垂直居中，不是相对于整个容器。
