justify-content 控制主轴对齐，align-items 控制交叉轴对齐；主轴方向由 flex-direction 决定，二者作用方向随之动态切换。
align-items 和 justify-content 分别控制哪个方向
justify-content 控制主轴（main axis）上的对齐，align-items 控制交叉轴（cross axis）上的对齐。主轴方向由 flex-direction 决定：默认是 row（从左到右），此时主轴水平、交叉轴垂直；若设为 column，则主轴变垂直、交叉轴变水平。
这意味着两者的“作用方向”不是固定的上下/左右，而是随 flex-direction 动态切换。很多人调了半天没效果，就是因为只改了 justify-content 却忘了主轴其实是垂直的。
常见组合与对应视觉效果
以默认 flex-direction: row 为例：
-
justify-content: center+align-items: center→ 水平+垂直居中（最常用） -
justify-content: flex-start+align-items: stretch→ 左对齐、子项高度拉满容器（stretch是默认值） -
justify-content: space-between+align-items: flex-end→ 子项水平等距分布、底部对齐
注意：align-items: baseline 会按第一行文字基线对齐，但若子项内无文本或字体大小不一致，容易出现“看似没对齐”的错觉。
立即学习“前端免费学习笔记（深入）”；
align-items 对单个子项无效？用 align-self 覆盖
align-items 是容器级属性，作用于所有直接子项；若某个子项需要单独调整交叉轴对齐方式，必须在该子项上设置 align-self。它会覆盖容器的 align-items 值。
例如：
.container { display: flex; align-items: center; } .item-a { align-self: flex-start; /* 只有这个 item 顶对齐 */ }常见误区：给子项设 margin: auto 有时也能实现居中，但它依赖于容器是否设置了明确尺寸和是否允许自动外边距生效——不如 align-self 明确可控。
justify-content 在 flex-wrap: wrap 下的行为限制
当容器设了 flex-wrap: wrap，justify-content 仅作用于**当前行内**的子项，不会跨行平均分配空间。比如 space-between 会让每行首尾贴边、中间等距，但换行后的下一行也独立计算。
如果想让多行内容整体居中或顶部对齐，justify-content 无能为力，得靠其他手段：
- 用
align-content控制行与行之间的交叉轴对齐（注意：它只在多行时生效） - 把 flex 容器包进另一个容器，用外层的
text-align: center或margin: 0 auto实现整体水平居中 - 避免换行，改用
flex-direction: column+justify-content: center模拟“垂直流式居中”
最容易被忽略的是：align-content 和 align-items 名字相似，但一个管“行间”，一个管“项内”，且 align-content 在单行 flex 中完全不生效。