justify-content控制主轴对齐、align-items控制交叉轴对齐，二者方向均由flex-direction决定；需同时设置才能实现水平垂直居中，且须注意容器尺寸、子元素显示类型及默认stretch行为的影响。
区别就两点：justify-content管主轴方向的对齐，align-items管交叉轴方向的对齐；方向完全取决于flex-direction设的是row还是column，不是固定“水平”或“垂直”。
justify-content 控制主轴对齐，但主轴不一定是水平方向
很多人误以为justify-content就是“水平居中”，其实它只负责主轴——而主轴由flex-direction决定：
- 当
flex-direction: row（默认）时，主轴是水平的，justify-content: center让子元素水平居中 - 当
flex-direction: column时，主轴变成垂直的，justify-content: center就让子元素垂直居中 -
justify-content: space-between在row下是左右撑开，在column下是上下撑开
常见错误：没写display: flex，或写了但父容器没设高度（尤其column时），导致justify-content看似无效。
align-items 控制交叉轴对齐，且默认值会拉伸子元素
align-items永远作用于与主轴垂直的方向。它的默认值stretch容易被忽略，带来意外效果：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→ 交叉轴是垂直方向 →align-items: stretch会让所有子元素高度拉满容器（除非子元素设置了height或min-height） -
flex-direction: column→ 交叉轴是水平方向 →align-items: stretch会让子元素宽度拉满容器 - 想让文字基线对齐？用
align-items: baseline，但只对含文本的元素有效，且需注意行高影响
典型坑：align-items: center在row布局下确实垂直居中，但如果子元素有margin-top或padding，会干扰视觉居中位置——此时应优先清空内边距或用box-sizing: border-box。
两者同时设置才能真正居中
单独用justify-content: center只能解决主轴方向，单独用align-items: center只能解决交叉轴方向。要实现水平+垂直居中，必须两个都写：
.container {
display: flex;
justify-content: center;
align-items: center;
}
注意几个边界情况：
- 容器没有明确宽高（比如
height: auto），align-items: center可能表现异常——尤其是内容高度小于容器时 - 子元素是
inline元素（如span），align-items对其无效，得先设display: block或inline-block - 如果用了
flex-wrap: wrap且有多行，align-items仍作用于每行内部，而整体行间对齐要用align-content
最容易被忽略的是轴向依赖性——改一个flex-direction，两个属性的作用方向全变。调试时别猜，直接打开浏览器开发者工具，勾选“Show Flexbox overlay”，一眼看清主轴/交叉轴走向和当前对齐效果。
