justify-self用于Grid布局中控制网格项在单元格内的水平对齐方式，取值包括start、end、center和stretch，默认为stretch；需父容器为display: grid，仅作用于直接子元素，与align-self分别控制横向和纵向对齐。
justify-self 是 CSS 中用于控制单个网格项在单元格内沿行轴（水平方向）对齐方式的属性。它只在使用 Grid 布局 时生效，在普通布局或 Flex 布局中不起作用。
1. justify-self 的基本用法
当你在一个网格容器中的某个网格项上设置 justify-self，可以决定这个项目在其所在网格单元格中的水平对齐方式。常见取值包括：
start：左对齐（在从左到右的语言中）end：右对齐center：居中对齐stretch：拉伸填满整个单元格（默认值）
示例：
.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 会在其所在的列单元格中向右对齐，而不会影响其他项目。
稿定抠图
AI自动消除图片背景
76 查看详情
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 就能灵活控制单个项目在单元格中的水平位置。
以上就是css justify-self在单元格中如何调整对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1026398.html
微信扫一扫 
支付宝扫一扫 
