该用 justify-content 还是 justify-items 取决于容器类型：flex 容器只支持 justify-content（控制子项整体主轴分布），grid 容器才支持 justify-items（控制各子项在单元格内的主轴对齐）；用错则无效。
justify-content 和 justify-items 到底该用哪个？
当子元素在主轴上不按预期对齐，先看容器是不是设置了 display: grid。只有 Grid 容器才支持 justify-items；Flex 容器只认 justify-content，用错就完全没效果。
-
justify-content控制所有子项在主轴上的整体分布（如居中、两端对齐） -
justify-items是 Grid 专属，控制每个子项自身在单元格内的主轴对齐方式（类似子项自己的text-align） - Flex 里写
justify-items: center不报错，但不会生效——浏览器直接忽略
align-items 和 align-self 为什么有时不起作用？
常见原因是父容器没设高度，或子元素是 display: inline 类型（比如未重置的 <span></span>）。Flex/Grid 对齐依赖“可用交叉轴空间”，没高度=没空间=对齐失效。
- 确保父容器有明确高度（
height或min-height），或内容撑开容器 - 子元素不能是纯内联元素：加
display: block或display: inline-block再试 -
align-self优先级高于align-items，但只对单个子元素生效；写在父容器上无效
justify-content: space-between 在 Grid 里为啥没反应？
因为 Grid 默认主轴对齐由 justify-content 控制，但它只在“网格容器有多余主轴空间”时才起作用——也就是列轨道总宽小于容器宽度。如果列定义用了 1fr 或 auto 填满，就没多余空间可分配。
- 想让列之间留空，改用
column-gap更直接可靠 - 真要用
justify-content: space-between，得配合固定列宽（如100px 100px 100px）+ 容器足够宽 - Grid 中
justify-content对单列无意义；Flex 才常靠它实现“首尾贴边、中间等距”
align-content 和 align-items 的区别到底在哪？
align-content 只在多行 Flex（flex-wrap: wrap）或有多行轨道的 Grid 中才有意义，它对齐的是“行与行之间”，不是单个子项。而 align-items 始终作用于每个子项在交叉轴上的位置。
立即学习“前端免费学习笔记（深入）”；
- 单行 Flex 容器里设
align-content: center—— 完全无效 - Grid 中若只有一行轨道，
align-content同样不生效 - 性能提示：频繁改变
align-content可能触发重排，尤其在动态增减子项时
display、height 和子元素的 display 类型。 
