justify-items用于设置网格项在行轴上的对齐方式，可选值有start、end、center、stretch；它作用于整个容器，但可通过justify-self单独覆盖某个项目。
CSS 中的 justify-items 属性用于控制网格容器中网格项在行轴（即水平方向，x 轴）上的对齐方式。它作用于整个网格容器，影响容器内所有网格项的对齐行为。
justify-items 的基本语法
你可以在定义网格容器的父元素上使用该属性：
.container { display: grid; justify-items: start | end | center | stretch;}
可选值及其效果
以下是 justify-items 支持的主要取值及它们的行为：
start：网格项紧贴所在网格区域的起始边缘（从左开始，LTR 模式下）。 end：网格项紧贴所在网格区域的结束边缘（右侧）。 center：网格项在其网格区域内水平居中。 stretch：默认值。网格项拉伸以填满整个网格区域（忽略 margin:auto 的影响）。
实际示例说明
假设有一个 2×2 的网格布局：
立即学习“前端免费学习笔记（深入）”；
Qoder
阿里巴巴推出的AI编程工具
270 查看详情
.grid-container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 80px 80px; justify-items: center;}.grid-item { background: lightblue;}
此时每个网格项都会在其各自的列单元格中水平居中对齐。
如果将 justify-items: start，所有项目会靠左对齐；设为 end 则靠右；设为 stretch 会占满整个列宽（除非设置了固定宽度）。
与 justify-self 的关系
justify-items 设置全局对齐方式，但你可以用 justify-self 在单个网格项上覆盖这个行为。例如：
.item-special { justify-self: start;}
这个特定项就会向左对齐，即使容器设置了 justify-items: center。
基本上就这些。合理使用 justify-items 可以快速统一网格项的水平对齐风格，适合大多数布局场景。
以上就是css justify-items在网格中如何对齐元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1024425.html
微信扫一扫 
支付宝扫一扫 
