justify-items: stretch 默认拉伸网格项填满单元格宽度，忽略自身 width；center 则保持原宽并水平居中。例如在 200px 单元格中，100px 的 div 使用 stretch 会变为 200px，使用 center 仍为 100px 并居中。选择取决于是否需占满空间。
在 CSS Grid 布局中，justify-items 属性用于控制网格项在其所在网格单元格内的水平对齐方式。当使用 stretch 和 center 作为 justify-items 的值时，它们的行为有明显区别。
这是 justify-items 的默认值（对于块级内容）。它会让网格项在行内方向上尽可能地拉伸，填满整个网格单元格的宽度。
width 设置（除非设置了最大宽度或使用了固定尺寸）max-width 防止过度拉伸该值会使网格项在其网格单元格中水平居中对齐，不会拉伸。
假设有一个两列的 Grid 容器，每个单元格宽 200px：
立即学习“前端免费学习笔记（深入）”；
justify-items: stretch：一个宽度为 100px 的 div 会被拉伸到 200pxjustify-items: center：同样的 div 仍为 100px 宽，但在 200px 的单元格中居中显示基本上就这些。选择哪个取决于你希望子元素是否占满单元格宽度。stretch 是“撑满”，center 是“居中不撑”。
以上就是css justify-items stretch与center区别的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
689
收藏
