justify-self没反应最常见原因是缺乏对齐空间：父容器需设display: grid和轨道定义，元素须为直系子元素且未脱离网格流；同时存在margin: auto会使其失效；跨列时对齐的是自身区域右边界而非容器右边缘。
justify-self 为什么写了没反应
最常见的情况是：它根本没生效空间。比如父容器只有一列 grid-template-columns: 1fr，而目标元素又占满整行（grid-column: 1 / -1），那它左右已经贴死，justify-self: end 就像想往墙上再推一堵墙——没空隙，自然没变化。
必须确认三点：
- 父容器设了
display: grid且有明确轨道定义（哪怕只是grid-template-columns: 1fr） - 目标元素是该容器的**直系子元素**（不是孙子、不是被
div包了一层的后代） - 该元素没脱离网格流：没设
position: absolute、float或display: contents
justify-self 和 margin: auto 别混着用
这是调试时最隐蔽的“抖动”来源：justify-self: end 和 margin-left: auto 同时存在，后者会直接让前者静默失效——CSS 规范强制规定：某轴上出现 automargin 时，对应方向的 *-self 值被忽略，不报错、不警告，只默默躺平。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想靠
justify-self控制水平位置，就清掉所有margin相关声明（尤其带auto的） - 想用
margin: auto居中，就别写justify-self，并确保该元素所在列轨道有足够剩余空间（其他项没把它挤满） - 在 DevTools 里检查 computed 样式，看
justify-self是否显示为end还是已被覆盖成auto
跨列时 justify-self 的对齐基准不是容器右边缘
如果元素用了 grid-column: 1 / 3 占两列，再设 justify-self: end，它只会紧贴**自己所占区域的右边界**（即第 2 列右侧），而不是整个网格容器的右边缘。这常被误读为“对齐偏移”或“抖动”，其实是作用域理解偏差。
适用场景与限制：
-
justify-self永远只在它被分配到的网格单元格（或跨列区域）内起作用 - 若需贴容器右边缘，应改用
justify-content: end（对齐整个网格轨道），或调整grid-column+justify-self组合 - 在
writing-mode: vertical-rl或direction: rtl下，end对应的是垂直向下或右侧起点，不是固定“右”
和 place-self、justify-items 的优先级关系
justify-self 的核心价值就是“局部覆盖全局”：它会直接覆盖父容器上设置的 justify-items，但仅限当前项。而 place-self 是它的简写形式（place-self: center end ≡ justify-self: end; align-self: center），不过兼容性略弱（IE11 不支持）。
容易踩的坑：
- 写了
place-self后又单独写justify-self，后者会被前者覆盖（简写优先级更高） -
justify-self: auto是默认值，等价于不写；它会让该项退回到使用容器的justify-items - 若容器设了
justify-items: stretch（默认），而某项设了justify-self: start但内容有固定宽度，它不会拉伸，而是左对齐——这点和 flex 中的justify-content完全不同
真正难调的不是语法，而是判断“它有没有对齐空间”和“它到底在对齐谁”。这两个问题搞不清，再多的 justify-self 都只是写给空气看的。
