justify-content未失效，而是随flex-direction改变主轴方向：row时控水平居中，column时控垂直居中；水平居中需配合align-items: center，二者始终正交作用于主轴与交叉轴。
flex-direction 改了，justify-content 为啥反而“失效”了
不是失效，是它作用的方向跟着主轴一起翻转了。比如默认 flex-direction: row 时，justify-content: center 是水平居中；一旦改成 flex-direction: column，它就变成垂直居中——此时想让子项水平居中，得用 align-items: center。
常见错误现象：justify-content: center 写了但没反应，或元素堆在顶部/左侧不动。本质是没确认当前主轴方向，把“主轴对齐”和“视觉方向”混为一谈。
-
justify-content只管主轴，align-items只管交叉轴，二者永远正交 - 改
flex-direction后，必须同步检查所有对齐属性是否还匹配目标方向 - 调试时可临时加
border: 1px solid red看容器尺寸，再用浏览器 devtools 的 Flex 布局高亮功能确认主/交叉轴
row-reverse / column-reverse 切换后 justify-content: flex-start 显示反了
flex-start 永远指向主轴的“起始端”，不是固定“左”或“上”。所以 flex-direction: row-reverse 下，justify-content: flex-start 实际靠右对齐；flex-direction: column-reverse 下则靠底对齐。
如果你想要“无论方向如何都靠左”，别依赖 flex-start，改用 justify-content: start（现代支持较好）或显式写 text-align: left 配合 align-items: flex-start（仅适用于文字类内容）。
立即学习“前端免费学习笔记（深入）”；
- 避免用
flex-start/flex-end表达固定方位，除非你明确控制了flex-direction - 业务逻辑需要“视觉倒序 + 语义正序”时，
order属性比row-reverse更安全（尤其涉及键盘 tab 和屏幕阅读器） -
row-reverse会改变gap的顺序表现：第一个 gap 出现在最右侧，容易误判间距逻辑
flex-wrap: wrap 之后 justify-content 不再均匀分布子项
justify-content 默认只对“单行”生效。开启 flex-wrap: wrap 后，如果子项换行，space-between 或 space-around 就只在每行内部起作用，不会跨行拉伸——看起来像“没对齐”或“间距不均”。
典型场景：响应式导航栏在小屏换行后，第二行按钮挤在左侧，第一行却撑满。
- 想实现多行整体居中，不能只靠
justify-content，得配合align-content: center（控制行与行之间的交叉轴对齐） -
align-content在单行时无效，只有flex-wrap: wrap且存在多行时才起作用 - 注意
align-content和align-items容易混淆：前者管“行堆叠”，后者管“单行内子项在交叉轴上的位置”
为什么设了 display: flex 却看不出主轴方向变化
因为父容器没有尺寸约束，或者子项本身撑不满容器，导致 flex-direction 的效果不可见。例如 flex-direction: column 下，若子项都是 inline 元素且没设高度，它们仍会横向排列，看起来像没生效。
- 确保父容器有明确宽高（哪怕只是
min-height: 100vh），否则align-items和align-content都可能无效果 - 子项若有
float、position: absolute或display: inline，会脱离 Flex 流，忽略flex-direction控制 - 检查是否有其他 CSS 重置了
display（比如某些 UI 库的 class 强制设display: block）
justify-content 和 align-content 的职责边界。 
