flex-direction决定主轴方向，justify-content控制主轴对齐、align-items控制交叉轴对齐；主轴变化时二者作用方向随之改变，非bug而是轴向逻辑必然结果。
flex-direction 改变后 justify-content 和 align-items 作用翻转，不是 bug，是必须按主轴/交叉轴逻辑重新理解对齐方向。
justify-content 控制的是主轴对齐，不是“水平居中”
很多人写 justify-content: center 是为了“让内容居中”，但实际它只在主轴上生效。主轴由 flex-direction 决定：
- 当
flex-direction: row（默认），主轴是水平的 →justify-content控制左右对齐 - 当
flex-direction: column，主轴是垂直的 →justify-content控制上下对齐 - 误在
column下用justify-content: center想“水平居中”，结果项目全堆在容器顶部中间（因为此时它把所有项目挤到主轴起点+居中）
align-items 控制的是交叉轴对齐，不是“垂直居中”
align-items 始终作用于与主轴垂直的方向（即交叉轴）：
-
flex-direction: row→ 交叉轴是垂直的 →align-items: center实现垂直居中 -
flex-direction: column→ 交叉轴是水平的 →align-items: center才实现水平居中 - 常见错误：在
column布局里漏掉align-items，导致子项左对齐（默认值stretch会拉宽，但没设宽时就表现为左对齐）
响应式切换方向时，对齐属性必须同步调整
用媒体查询改 flex-direction 时，justify-content 和 align-items 的语义角色会互换，不能沿用旧写法：
立即学习“前端免费学习笔记（深入）”；
- 桌面端
flex-direction: row+justify-content: space-between（左右撑开） - 移动端切为
flex-direction: column后，若仍保留justify-content: space-between，会导致项目在垂直方向被撑开，视觉断裂 - 正确做法：在媒体查询内重写对齐，例如加
align-items: stretch或justify-content: flex-start，再配合align-items: center控制水平位置
align-content 只在多行 flex 容器中生效
align-content 不控制单个项目，只影响“行与行之间”的交叉轴分布，且前提是 flex-wrap: wrap 且内容确实换行了：
- 单行容器（
flex-wrap: nowrap）下，align-content完全无效 - 即使写了
flex-wrap: wrap，如果所有项目能塞进一行，也不会触发多行，align-content依然不生效 - 调试时可临时加
height限制容器高度，强制换行，验证align-content行为
最易被忽略的一点：对齐效果是否生效，取决于父容器是否有明确尺寸（尤其是交叉轴方向）。比如 flex-direction: column 下想用 align-items: center 水平居中，但父容器宽度是 auto 且无约束，它可能收缩到内容宽度，导致“居中”看起来没变化——这时需要检查父容器的 width 或 max-width 是否合理。
