justify-content用于Flexbox或Grid中控制子元素在主轴上的整体分布，如flex-start、center、space-between等；justify-items仅用于Grid布局，定义网格项在单元格内内联轴的对齐方式，如start、center、stretch。前者作用于整体排列，后者针对个体在单元格中的对齐，且justify-items不适用于Flexbox。
justify-items 和 justify-content 是 CSS 中用于控制布局对齐方式的两个属性，但它们作用的对象和使用场景不同。主要区别在于：前者作用于单个子元素在交叉轴上的对齐，后者作用于整个内容在主轴上的分布。
justify-content 控制主轴上的空间分配
这个属性用在弹性盒子（Flexbox）或网格容器（Grid）上，用来设置子元素在主轴方向上的对齐方式。
常见取值包括：- flex-start：元素向主轴起点对齐
- flex-end：元素向主轴终点对齐
- center：元素在主轴居中
- space-between：两端对齐，元素间间距相等
- space-around：每个元素周围有相等空间
- space-evenly：所有元素间隔完全均匀
例如，在一个 flex 容器中，justify-content: center; 会让所有子项在主轴方向居中排列。
justify-items 控制网格项在单元格中的对齐
这个属性主要用于网格布局（Grid），定义网格项在其对应网格单元格内的内联轴（inline axis）对齐方式，也就是横轴方向的对齐。
立即学习“前端免费学习笔记（深入）”；
常见取值有：- start：内容靠单元格起始边对齐
- end：靠结束边对齐
- center：在单元格内居中
- stretch：拉伸以填满单元格（默认值）
注意：justify-items 对 Flexbox 无效，它只适用于 Grid 布局。
关键区别总结
- justify-content 管的是“整体怎么排”，比如多个子元素之间怎么分布、是否居中、有没有空隙等。
- justify-items 管的是“每个格子里的内容怎么对齐”，仅限 Grid，且针对每个项目在其单元格内的对齐。
- 在 Flexbox 中只能用
justify-content，而不能用justify-items来影响主轴对齐。
基本上就这些。理解清楚它们分别用在什么布局模型中，以及作用目标是“整体”还是“个体”，就能避免混淆。
