justify-self没反应的主因是父容器未启用grid布局或子项非直系元素；需确认display: grid已设置、目标元素为网格直系子项、未跨列占满轨道、且未被margin: auto覆盖。
justify-self 为什么没反应？先确认这几点
直接写 justify-self: center 却没效果，大概率不是属性写错，而是它根本没生效。常见失效原因包括：
• 父容器没设 display: grid（或 inline-grid），浏览器静默忽略该属性
• 目标元素不是网格容器的**直系子元素**，中间嵌套了其他 div 或 wrapper
• 该子项跨了多列（如 grid-column: 1 / -1），但所在行轨道高度为 auto，导致视觉上“居中”不明显
• 同时写了 margin-left: auto 或 margin: auto，CSS 规范规定 automargin 会强制覆盖 justify-self
justify-self 的取值和实际对齐方向怎么对应
justify-self 永远作用于**行内轴（inline axis）**，默认是水平方向，但它不是固定“左/右”，而取决于书写模式：
• LTR（如中文、英文）下：start = 左，end = 右
• RTL（direction: rtl）下：start = 右，end = 左
• 垂直排版（writing-mode: vertical-rl）下：start = 上，end = 下
所以别硬记“center 就是居中”，要理解它是相对于**当前单元格的行内轴范围**居中——如果单元格本身很窄，center 也会显得偏左或偏右。
如何让一个按钮在 Grid 单元格里靠右，又不干扰其他子项
这是最典型的使用场景。关键在于：只动这个按钮，不动容器全局设置。
• 容器保持默认，不设 justify-items（或设为 stretch，即默认拉满）
• 给按钮单独加样式：
.submit-btn { justify-self: end; }• 如果按钮需要同时垂直居中，再加：
.submit-btn { justify-self: end; align-self: center; }• 避免用
place-self: end center——虽然等价，但 IE11 不支持，且部分旧版 Safari 解析不稳定
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
和 justify-items、place-items 混用时的优先级陷阱
justify-self 的核心价值就是「局部覆盖」，但它只覆盖同方向的容器级设置：
• 容器设了 justify-items: start，某子项设 justify-self: end → 该项生效，其余仍为 start
• 容器设了 place-items: center（等价于 justify-items: center; align-items: center），某子项只设 justify-self: end → 水平方向被覆盖，垂直方向仍继承 center
• 但如果该子项还设置了 align-self: stretch（显式覆盖），那垂直方向就不再继承 place-items 的 center
最容易被忽略的是：一旦子项写了任意 *-self，它就在对应轴向上完全脱离容器控制，哪怕只写了一个值。
立即学习“前端免费学习笔记（深入）”；
