justify-content在flexbox和grid中均有效，始终控制容器内所有项目在主轴上的整体分布；justify-items仅适用于grid，专管每个网格项在其单元格内的内联轴对齐，flexbox中完全无效。
justify-content 在 Flexbox 和 Grid 中都有效，但作用对象不同
它始终控制“容器内所有项目在主轴上的整体分布”，比如 justify-content: space-between 会让第一个项目贴左、最后一个贴右、中间等距。这个行为在 Flexbox（flex-direction: row）和 Grid（grid-template-columns 定义列时）中一致。
但注意：在 Flexbox 中，justify-content 只影响主轴（比如横向），而 Grid 中它的主轴方向由 grid-auto-flow 和轨道定义隐式决定；若你用 grid-template-rows 主导布局，主轴就变成垂直方向，此时 justify-content 会控制垂直分布 —— 这点容易被忽略。
- Flexbox 下，
justify-content的对齐结果受flex-direction直接驱动 - Grid 下，它对齐的是“整个网格轨道块”，不是单个格子；如果容器宽度远大于网格总宽，
justify-content: center会让整组列居中，而非每个格子内容居中 - 常见误操作：给 Grid 容器设了
justify-content: center却发现子元素没居中 —— 那是因为你真正需要的是justify-items
justify-items 只在 Grid 中起作用，且只管“格子里的内容”
justify-items 是 Grid 专属属性，在 Flexbox 中完全无效，写上去也不会报错，但浏览器直接忽略。它不改变网格结构，只调整每个网格项在其对应单元格内的**内联轴对齐方式**（通常就是水平方向）。
例如：justify-items: center 会让每个 <div> 在它所占的那一个格子里水平居中，哪怕这个格子本身很窄或很宽；而 <code>justify-content: center 是让整套列轨道在父容器里居中。
- 取值如
start/end/center/stretch，其中stretch是默认值（所以不写也自动填满格子宽度） - 它不能替代
text-align：如果格子里是文字，justify-items: center对文字生效；但如果是内联元素（如<span></span>），仍需配合text-align或display: block - 想单独控制某个项目？用
justify-self，它优先级高于justify-items
align-items 和 justify-items 不是对称关系，别按 Flexbox 经验套用
在 Flexbox 中，justify-content（主轴）和 align-items（交叉轴）是一对常用组合；但在 Grid 中，justify-items 控制的是**内联轴**（通常水平），而 align-items 控制的是**块轴**（通常垂直）—— 它们共同决定项目在单元格内的二维对齐，但轴向命名和 Flexbox 并不一一对应。
更关键的是：align-items 在 Grid 中也只作用于“项目在单元格内”的垂直对齐，不是整个网格行的对齐。如果你希望某一行的所有格子高度一致，靠的是 grid-template-rows 或 align-content（后者只对多行网格有效）。
- Grid 中没有
align-content的等效物来控制列方向的行间分布 —— 列方向的“行间”由justify-content管理 - Flexbox 的
align-items影响所有项目在交叉轴上的位置；Grid 的align-items只影响每个项目在自己格子的块轴上怎么放 - 不要指望
justify-items+align-items能像 Flexbox 那样一键居中整个容器 —— Grid 居中往往需要justify-content+align-content+justify-items+align-items四者配合
调试时最容易混淆的两个现象
当你看到对齐没生效，大概率是下面两种情况之一：
- 用了
justify-items却在 Flexbox 容器里 —— 检查display值是不是flex，是的话换justify-content和align-items - Grid 容器里写了
justify-content: center，但子元素看起来没动 —— 很可能因为网格轨道已占满容器宽度（比如grid-template-columns: 1fr 1fr 1fr），没留空隙可分配；加个width: fit-content或固定宽再试 - 子元素内容（如图片）没居中，但
justify-items: center已设 —— 检查该元素是否设置了width或max-width，拉伸类对齐（stretch）会被显式宽高覆盖
真正难处理的，是当 Grid 和 Flexbox 嵌套时 —— 外层 Grid 的 justify-items 不会影响内层 Flex 容器的对齐逻辑，后者只认自己的 justify-content。这时候得一层层确认 display 类型，而不是统一套用一个对齐思路。
