justify-content用于容器内项目在主轴上的对齐，适用于Flex和Grid布局；justify-items仅用于Grid布局中项目在其单元格内的对齐。两者可在Grid中协同使用：justify-content控制网格整体分布，justify-items设定项目在单元格内的水平对齐方式，如居中或拉伸。
在 CSS 布局中，justify-content 和 justify-items 都用于控制元素在主轴方向上的对齐方式，但它们的作用对象和适用场景不同。理解两者的区别与搭配使用方式，能更精准地实现布局效果。
justify-content：控制容器内项目之间的对齐
justify-content 作用于弹性容器（flex container）或网格容器（grid container），用来定义项目在主轴方向上的整体对齐方式。
- 常见值包括：
flex-start、center、flex-end、space-between、space-around等 - 适用于 flex 和 grid 布局
- 影响的是项目之间的间距分布
例如，在 Flex 布局中：
.container {
display: flex;
justify-content: center; /* 所有子项居中对齐 */
}
justify-items：控制网格项目内部的对齐（仅 Grid）
justify-items 是Grid 布局特有的属性，用于设置网格容器中所有项目在其对应网格区域内的对齐方式。
立即学习“前端免费学习笔记（深入）”；
- 只对 grid 容器有效
- 控制的是项目在单元格中的水平对齐
- 可取值：
start、end、center、stretch等
示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center; /* 每个网格项在其单元格内居中 */
}
能否一起使用？关键看布局模式
两者可以共存，但只有在 Grid 布局中才能同时生效，因为 justify-items 在 Flex 中无效。
- 在 Grid 中，justify-content 调整整个网格轨道之间的空间分配
- justify-items 控制每个项目在其轨道单元格内的对齐
实际例子：
.grid-layout {
display: grid;
grid-template-columns: 100px 100px 100px;
width: 500px;
justify-content: space-around; /* 网格整体在容器中分散排列 */
justify-items: center; /* 每个子项在其100px宽的列中居中 */
}
这个组合让三列网格在500px容器中留出均匀边距，同时每列内的内容水平居中。
实用建议与注意事项
- Flex 布局只需用 justify-content，justify-items 会被忽略
- Grid 布局中，若设置了 justify-content: center，整个网格居中；再配合 justify-items: start，可实现“网格居中，内容左对齐”
- 避免混淆：justify-content 是“容器对项目”的对齐，justify-items 是“单元格对内容”的对齐
- 调试时可用背景色区分网格区域和项目大小，便于观察对齐效果
基本上就这些。掌握它们的适用范围和层级关系，就能灵活控制布局对齐行为，不复杂但容易忽略细节。
