justify-self用于Grid布局中控制网格项在单元格内的水平对齐方式，取值包括start、end、center和stretch，默认为stretch；需父容器为display: grid，仅作用于直接子元素，与align-self分别控制横向和纵向对齐。
justify-self 是 CSS 中用于控制单个网格项在单元格内沿行轴（水平方向）对齐方式的属性。它只在使用 Grid 布局 时生效，在普通布局或 Flex 布局中不起作用。
1. justify-self 的基本用法
当你在一个网格容器中的某个网格项上设置 justify-self，可以决定这个项目在其所在网格单元格中的水平对齐方式。常见取值包括：
示例：
.container {
display: grid;
grid-template-columns: 100px 100px;
width: 300px;
}
.item {
justify-self: center; / 在单元格中水平居中 /
}
2. 实际效果演示
假设你有一个 2×2 的网格，想让其中一个项目在它的格子中靠右对齐：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.box1 {
justify-self: end; / 靠右对齐 /
}
.box2 {
justify-self: center; / 居中对齐 /
}
这样，.box1 会在其所在的列单元格中向右对齐，而不会影响其他项目。
3. 注意事项
确保父容器是 display: grid，否则 justify-self 不会起作用。它只对直接位于网格容器中的子元素有效。
如果希望所有子项统一设置对齐方式，可以使用 justify-items 在容器上统一设置，而不是逐个写 justify-self。
4. 与 align-self 的区别
justify-self 控制的是行轴（横向），而 align-self 控制列轴（纵向）。例如：
.item {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
两者结合可实现单元格内的完全居中。
基本上就这些。只要用对了 Grid 布局，justify-self 就能灵活控制单个项目在单元格中的水平位置。
