justify-self: end没生效，首要原因是缺乏对齐空间：父容器须设display: grid且定义列轨道（如grid-template-columns: 1fr），目标元素必须是直系子元素且未脱离网格流（无position: absolute等）。
justify-self: end 没生效？先确认这三件事
它不是“写了就动”，而是需要对齐空间和正确上下文。最常见失效场景是：父容器没设 display: grid，或目标元素不是直系子元素，或它被 position: absolute、float 或 display: contents 脱离了网格流。
必须同时满足：
- 父容器有
display: grid且至少定义了列轨道（哪怕只是grid-template-columns: 1fr） - 目标元素是该容器的**直接子元素**（不能嵌套在中间 div 里）
- 该元素未脱离网格格式化上下文（检查 computed 样式中
display是否仍为block或grid类型）
justify-self: end 对齐的是哪条边？
它永远对齐到**该元素所占网格区域的右边界**，不是整个容器右边缘。比如：
- 元素设了
grid-column: 2 / 3→ 对齐到第 2 列右侧 - 元素设了
grid-column: 1 / -1→ 对齐到最后一列线（即容器右边缘） - 元素跨两列
grid-column: 1 / 3→ 对齐到第 2 列右侧，而非容器右端
想贴容器右边，得让它“伸到最右”：用 grid-column: -1 / -1 或 grid-column: auto / -1，再配 justify-self: end。
和 margin: auto 冲突吗？会静默失效
会。CSS 规范明确规定：某轴上出现 automargin（如 margin-left: auto），对应方向的 *-self 值会被忽略——不报错、不警告，DevTools 里 justify-self 可能还显示为 end，但 computed 值已是 auto。
实操建议：
- 要靠
justify-self控制水平位置，就清掉所有margin，尤其带auto的 - 想用
margin: auto居中，就别写justify-self，并确保该列有剩余空间（其他项没占满） - 在 DevTools 的 computed 面板里，看
justify-self实际解析值是不是被覆盖了
和 justify-items、place-self 的关系怎么选？
三个属性层级不同，别混用：
-
justify-items: end→ 所有子项默认右对齐（容器级批量设置） -
justify-self: end→ 仅当前项右对齐（精准控制单个） -
place-self: end end→ 等价于justify-self: end; align-self: end（想同时控制水平+垂直）
真正容易被忽略的是：如果容器已设 justify-items: center，而你又给某个子项加 justify-self: end，后者会覆盖前者——这是设计行为，不是 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
