justify-self控制水平对齐，align-self控制垂直对齐；两者分别沿行内轴和块轴调整网格项位置，结合使用可实现单元格内的精准定位。
在CSS Grid布局中，justify-self 和 align-self 都用于控制单个网格项在其网格区域内的对齐方式，但它们作用的方向不同。理解这两个属性的区别，有助于更精准地控制子元素的定位。
justify-self：控制横向（行内轴）对齐
justify-self 作用于行内轴（inline axis），也就是沿行的方向（通常是水平方向），决定子元素在所在网格单元格中的水平对齐方式。
常见取值包括：
start：左对齐（默认） end：右对齐 center：居中对齐 stretch：拉伸以填满整个单元格（默认行为）
例如，让某个网格项在单元格内靠右对齐：
.grid-item {
justify-self: end;
}
align-self：控制纵向（块轴）对齐
align-self 作用于块轴（block axis），即沿列的方向（通常是垂直方向），控制子元素在网格单元格中的垂直对齐方式。
常用值与 justify-self 类似：
start：顶部对齐 end：底部对齐 center：垂直居中 stretch：拉伸填满单元格（默认）
若希望某元素在单元格中垂直居中：
Qoder
阿里巴巴推出的AI编程工具
270 查看详情 
.grid-item {
align-self: center;
}
结合使用实现精准定位
当同时设置 justify-self 和 align-self，可以精确控制子元素在二维空间中的位置。
比如让一个子元素在网格单元格中“居中”显示：
.grid-item {
justify-self: center;
align-self: center;
}
此时元素会在水平和垂直方向都居中。
需要注意的是，这些属性只在当前子元素所在的网格区域有“多余空间”时才起作用。如果网格轨道尺寸刚好等于内容大小，则看不到对齐效果。
基本上就这些。掌握 justify-self 和 align-self 的方向差异，就能灵活处理 Grid 布局中单个子元素的对齐问题。不复杂但容易忽略细节。
以上就是Grid布局中justify-self与align-self的区别_子元素对齐技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/978494.html
微信扫一扫 
支付宝扫一扫 
