justify-self 和 align-self 仅对网格项生效，需父容器设为 display: grid/inline-grid 且定义网格轨道（如 grid-template-columns）；它们分别控制行内轴（水平）和块轴（垂直）对齐，优先级高于 justify-items/align-items，但不适用于 flexbox 或脱离网格流的元素。
justify-self 和 align-self 怎么用才生效
这两个属性只对网格项（grid item）有效，且必须在父容器是 display: grid 或 display: inline-grid 时才起作用。设在网格容器上没用，设在非网格子元素上也没用。
常见错误现象：justify-self: center 写了但完全没反应——大概率是父元素没设 grid-template-columns 或 grid-template-rows，导致浏览器没生成真正的网格轨道；或者该元素被 float、position: absolute 脱离了网格流。
- 必须确保父元素有明确的网格定义（哪怕只是
grid-template-columns: 1fr） - 不能和
place-self混用导致覆盖（place-self是简写，会同时覆盖两个方向） - 如果用了
grid-area占据多格，justify-self控制的是它在整个所占区域内的**行内轴对齐**，不是相对于整个容器
justify-self 控制水平对齐，align-self 控制垂直对齐
命名很直白，但容易记反：justify-self 对应的是网格容器的 justify-items，管的是**行内轴（inline axis）**；align-self 对应 align-items，管的是**块轴（block axis）**。在默认 grid-auto-flow: row 下，行内轴 = 水平方向，块轴 = 垂直方向。
使用场景：比如一个卡片组件需要右对齐按钮，但其他内容左对齐；或表单里某个输入框要垂直居中而其他靠上。
justify-self: start | end | center | stretch | self-start | self-endalign-self: start | end | center | stretch | self-start | self-end-
stretch是默认值，会拉伸填满轨道；设为start后若内容有固定宽高，就不会撑开轨道 - 注意
self-start/self-end是相对于自身 writing-mode 的起点/终点，中文默认就是start ≡ left
和 justify-items / align-items 的优先级关系
justify-self 和 align-self 会**直接覆盖**容器上设置的 justify-items 和 align-items，但仅限于当前项。这是它们存在的核心价值：精细化控制单个子项。
性能影响几乎为零，兼容性也很好（Chrome 57+、Firefox 52+、Safari 10.1+），IE 完全不支持——如果必须兼容 IE，别用这两个属性，改用 margin: auto 配合 display: grid（IE 支持老版 Grid，但不支持 *-self）。
- 容器设了
justify-items: center，某子项加justify-self: start→ 该项左对齐，其余仍居中 - 如果子项同时设了
justify-self和margin-left: auto，后者会被忽略（*-self优先级更高） - Flexbox 里没有对应属性，别想混用；Grid 里也别试图用
text-align控制单个项的对齐——它只影响内联内容，不管网格项本身位置
为什么有时候 align-self: center 不居中
最常踩的坑：父容器没有定义明确的块轴尺寸（即没设 grid-template-rows 或高度限制），导致轨道高度由内容撑开，align-self: center 实际上是在“刚好够用”的高度里居中——看起来没变化。
另一个隐形原因：子项本身设置了 height 或 min-height，但父轨道没预留空间，浏览器按最小尺寸渲染后，再居中就看不出效果。
- 验证方法：给父容器加
border: 1px solid red，看网格轨道是否真有富余高度 - 快速修复：给父容器显式设
grid-template-rows: 100px或min-height: 200px - 如果要用自适应高度又想居中，可配合
minmax(min-content, 1fr)定义轨道，让align-self: center有空间可居
真正难调的永远不是属性名，而是你没意识到轨道本身有没有“留白”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
