justify-items: stretch 默认拉伸网格项填满单元格宽度，忽略自身 width；center 则保持原宽并水平居中。例如在 200px 单元格中，100px 的 div 使用 stretch 会变为 200px，使用 center 仍为 100px 并居中。选择取决于是否需占满空间。
在 CSS Grid 布局中，justify-items 属性用于控制网格项在其所在网格单元格内的水平对齐方式。当使用 stretch 和 center 作为 justify-items 的值时，它们的行为有明显区别。
justify-items: stretch
这是 justify-items 的默认值（对于块级内容）。它会让网格项在行内方向上尽可能地拉伸，填满整个网格单元格的宽度。
网格项会忽略自身的 width 设置（除非设置了最大宽度或使用了固定尺寸） 适合希望内容填满可用空间的布局场景 如果网格项内部是文本或弹性容器，可能需要额外设置 max-width 防止过度拉伸
justify-items: center
该值会使网格项在其网格单元格中水平居中对齐，不会拉伸。
网格项保持其固有宽度（由内容或显式 width 决定） 多余的空间在左右两侧平均分配 适合需要居中显示、不希望内容被拉长的设计
实际示例对比
假设有一个两列的 Grid 容器，每个单元格宽 200px：
Shrink.media
Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具
123 查看详情
立即学习“前端免费学习笔记（深入）”；
使用 justify-items: stretch：一个宽度为 100px 的 div 会被拉伸到 200px 使用 justify-items: center：同样的 div 仍为 100px 宽，但在 200px 的单元格中居中显示
基本上就这些。选择哪个取决于你希望子元素是否占满单元格宽度。stretch 是“撑满”，center 是“居中不撑”。
以上就是css justify-items stretch与center区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031874.html
微信扫一扫 
支付宝扫一扫 
