justify-items用于Grid布局中控制项目在行内轴（水平）的对齐，align-items在Grid和Flexbox中均适用，控制块轴（垂直）对齐，Flexbox中主轴对齐由justify-content实现，默认值均为stretch。
在 CSS 中，justify-items 和 align-items 是用于控制网格（Grid）或弹性盒子（Flexbox）中子元素对齐方式的属性。它们分别处理不同方向上的对齐：主轴与交叉轴。理解它们的关键在于明确当前布局上下文（是 Grid 还是 Flexbox）以及容器的轴方向。
justify-items：控制行内轴（主轴）对齐
justify-items 主要用于 网格布局（Grid） 中，定义网格项在其单元格内的水平对齐方式（即行内轴方向）。它不适用于弹性盒子（Flexbox）中的子元素对齐 —— 在 Flexbox 中，对应功能由 justify-content 实现。
常见取值包括：
- start：项目对齐到单元格的起始边缘
- end：对齐到结束边缘
- center：居中对齐
- stretch：拉伸以填满整个单元格（默认值）
示例：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
justify-items: center; /* 所有项目在单元格内水平居中 */
}
align-items：控制块轴（交叉轴）对齐
align-items 在 Grid 和 Flexbox 布局中都可用，用于控制项目在交叉轴上的对齐方式。
在 Flexbox 中，如果主轴是水平方向（默认），那么交叉轴就是垂直方向；在 Grid 中，它控制项目在网格单元格内的垂直对齐。
常用值：
- flex-start / start：顶部对齐
- flex-end / end：底部对齐
- center：交叉轴居中
- baseline：基线对齐
- stretch：拉伸填满容器（默认）
Flexbox 示例：
.flex-container {
display: flex;
align-items: center; /* 子项在侧轴（垂直）居中 */
}
Grid 示例：
.grid-container {
display: grid;
align-items: center; /* 网格项在单元格内垂直居中 */
}
关键区别总结
- justify-items 只作用于 Grid 容器，控制项目在单元格内的 行内轴（通常是水平） 对齐
- align-items 在 Grid 和 Flexbox 中都有效，控制 块轴（通常是垂直） 对齐
- 在 Flexbox 中，没有
justify-items，使用justify-content控制主轴对齐 - 两者的默认值通常都是 stretch
基本上就这些，掌握轴的方向和布局模式，就能正确使用这两个对齐属性。
