align-self没生效最常见原因是父容器未设display: grid/inline-grid；它仅对Grid/Flex直接子元素有效，且受align-items: stretch、子元素尺寸、writing-mode等影响。
align-self 为什么没生效
最常见原因是父容器没开启 Grid 布局，align-self 只在 Grid 或 Flex 容器的直接子元素上起作用。如果父元素只是普通 div，或者用了 display: block / inline，那 align-self 完全被忽略。
检查父容器是否设置了 display: grid 或 display: inline-grid；另外注意：如果父容器设置了 align-items: stretch（Grid 默认值），而子元素又没设高度或内容撑不开，align-self 的 start/end/center 看起来可能“没变化”——其实是拉伸覆盖了对齐效果。
- 确认父元素有
display: grid - 子元素需是 Grid 容器的**直接子项**，嵌套一层就失效
- 避免子元素同时设了
height和align-self: stretch（会冲突） - 若用
grid-template-rows: 1fr这类弹性行高，align-self才容易观察到效果
align-self 支持哪些值，各有什么表现
align-self 控制的是单个子元素在**网格区域（grid area）内**的块轴（垂直方向）对齐方式。它不改变网格线位置，只调整内容在分配好的单元格里的摆放。
.item-a {
align-self: start; /* 顶对齐（单元格顶部） */
}
.item-b {
align-self: end; /* 底对齐（单元格底部） */
}
.item-c {
align-self: center; /* 居中 */
}
.item-d {
align-self: stretch; /* 拉伸填满单元格（默认行为） */
}
.item-e {
align-self: self-start; /* 等价于 start，但受 writing-mode 影响 */
}注意：self-start / self-end 是逻辑值，适合多语言布局；日常开发中用 start/end 更直观。如果父容器设置了 direction: rtl 或 writing-mode: vertical-rl，start 对应的物理边会变，这点容易误判。
立即学习“前端免费学习笔记（深入）”；
和 justify-self 搭配使用时的常见错位
align-self 管垂直，justify-self 管水平。两者独立生效，但容易一起设却忘了父容器有没有留出足够空间。比如：
- 单元格本身宽度只有
50px，却给子元素设justify-self: center+width: 200px→ 子元素溢出，居中“失效” - 用了
grid-auto-columns: min-content，导致列宽刚好包住内容，justify-self: end看不出右移效果 - 子元素是
img且没设height，align-self: center可能只对齐基线而非视觉中心
建议先用 outline: 1px solid red 给子元素加轮廓，看清它实际占位区域，再调对齐。
替代方案：什么时候不该用 align-self
如果整个网格里大部分子元素都需要统一的垂直对齐，优先用父容器的 align-items，而不是每个子项重复写 align-self。后者更适合“个别破例”场景，比如表头固定顶对齐、操作按钮底对齐。
更隐蔽的问题是：当子元素本身是 Flex 容器时，它的内部对齐由自身 align-items 控制，此时外层 align-self 只决定这个 Flex 容器盒子在网格单元格里的位置，不穿透影响其子项。
真正要微调内容内部对齐，得进到子元素内部去设；align-self 永远只作用于“这一层盒子”，不会级联。
