justify-content 控制主轴（默认水平）子元素间距，仅对 flex 容器生效；align-items 控制交叉轴（默认垂直）子元素对齐，二者常组合实现居中等布局效果。
justify-content 控制主轴上的子元素间距
这个属性只在设置了 display: flex 的容器上生效，作用是沿主轴（默认是水平方向）分配子元素之间的空白。它不控制单个子项内部对齐，也不影响交叉轴。
-
justify-content: flex-start—— 默认值，所有子项靠主轴起点对齐（左对齐） -
justify-content: center—— 居中，但注意：这是**容器内所有子项整体居中**，不是每个子项自己居中 -
justify-content: space-between—— 首尾子项贴住容器边缘，中间等距分布；如果只有两个子项，效果最直观 -
justify-content: space-around—— 每个子项两侧留出相等空间，视觉上比space-between更“松散” -
justify-content: space-evenly—— 所有间隙（包括首尾到容器边缘）完全相等；IE 不支持
常见错误：给子项单独设 margin: auto 试图替代 justify-content，结果发现没反应——因为 margin: auto 在主轴上只在特定条件下生效（比如只有一个子项且容器有明确宽度），不如直接用 justify-content 可控。
align-items 控制交叉轴上的子元素对齐
它决定所有子项在交叉轴（默认是垂直方向）如何对齐。注意：这个对齐是统一的，不能让某个子项单独偏移，除非用 align-self 覆盖。
-
align-items: stretch—— 默认值，子项在交叉轴方向拉伸填满容器高度（前提是没设height或min-height） -
align-items: center—— 所有子项在交叉轴居中（比如让一行按钮垂直居中） -
align-items: flex-start—— 全部顶对齐（对行内布局来说就是“基线对齐”的近似效果） -
align-items: baseline—— 按文本基线对齐，适合含文字的混合子项（如图标+文字按钮），但兼容性略差于center
容易被忽略的一点：如果子项本身设置了 height 或 min-height，align-items: stretch 就不会拉伸它；此时若想强制居中，必须显式设 align-items: center。
立即学习“前端免费学习笔记（深入）”；
justify-content 和 align-items 同时用的典型场景
最常用组合是 justify-content: center + align-items: center，实现真正的“绝对居中”一个子元素（比如加载动画、空状态提示）。但这要求容器有明确尺寸（如 height: 100vh），否则可能看不出效果。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.loader {
width: 40px;
height: 40px;
background: #007bff;
}
另一个高频场景是导航栏：水平排列用 justify-content: space-between，再加 align-items: center 让 logo 和菜单按钮垂直居中。这时要注意子项如果有 padding 或 line-height，会影响实际对齐位置，最好统一用 box-sizing: border-box。
为什么有时候 align-items 没生效？
最常见原因有三个：
- 父容器没设
display: flex，或者写成了inline-flex但容器宽度不够导致换行，此时交叉轴变成水平，align-items行为就变了 - 子项用了
float或position: absolute，这些元素会脱离 flex 格局，align-items对它们无效 - 容器本身没有高度（比如子项全是
float或inline元素撑不起高度），导致交叉轴“不存在”，align-items失去作用对象
调试建议：临时加 outline: 1px solid red 到容器和子项，看实际渲染区域是否符合预期；再检查 computed styles 中 display 和 height 是否如你所想。
