justify-content从未“失效”或“反了”，它始终严格作用于主轴，而主轴方向由flex-direction决定：row时主轴水平，center即水平居中；column时主轴垂直，center即垂直居中；对齐效果错乱本质是混淆了主轴与视觉方向，需结合align-items控制交叉轴，并用devtools Flex高亮确认实际轴向。
justify-content 从来就没“反”，只是主轴方向变了
很多人说 justify-content 在 flex-direction: column 下“行为反了”，其实它根本没变——它始终只管主轴，而主轴方向由 flex-direction 决定。默认 row 时主轴是水平的，justify-content: center 就是水平居中；改成 column 后主轴变成垂直，justify-content: center 自然就变成垂直居中。
常见错误现象：
- 写了
justify-content: center却发现文字上下居中了，不是想要的左右居中 - 加了
align-items: flex-end想右对齐，结果内容贴底了
本质是把“视觉方向”和“主轴方向”混为一谈。调试时打开浏览器 devtools 的 Flex 高亮功能，一眼就能看到当前主轴箭头指向哪——别猜，直接看。
align-items 管的是交叉轴，不是“另一个方向”的补丁
align-items 的作用永远正交于 justify-content：它只负责交叉轴上的对齐。当 flex-direction: column 时，交叉轴就是水平方向，所以 align-items: center 才是水平居中，align-items: flex-end 才是右对齐。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为
align-items是“兜底用的居中属性”，随便加上去凑效果 - 子元素本身有
margin: auto，它在 flex 容器里会覆盖align-items行为 - 父容器没设高度或
min-height，导致align-items: center在垂直方向“无处可中”
验证方法：临时给容器加 border: 1px solid red，再检查子元素是否真在容器内水平居中——而不是靠文字自身的 text-align 假象蒙混过关。
flex-direction 被隐式修改时最危险
真正卡住人的，往往不是你写的代码，而是别人改的。比如：
- 全局 CSS reset 里写了
* { flex-direction: column; }（极少见但真有人干） - UI 组件库（如 Ant Design 的
Card或Space）内部设了flex-direction: column，你嵌套使用时完全没意识到 - CSS-in-JS 中某个主题变量动态注入了
flex-direction，devtools styles 面板里看不到显式声明
快速确认当前值的方法：
getComputedStyle(document.querySelector('.your-container')).flexDirection返回 "column" 还是 "row"，比翻几十行样式表快得多。
想“不管方向都靠左”？别硬扛 justify-content
如果业务逻辑要求“无论 flex-direction 是 row 还是 column，内容都视觉靠左”，靠 justify-content: flex-start 不可靠——因为 row-reverse 或 column-reverse 下它会变右/变底。
更稳妥的做法：
- 用
justify-content: start（现代浏览器支持良好，Chrome 89+/Firefox 89+） - 对纯文本内容，配合
text-align: left+align-items: flex-start - 需要语义正序但视觉倒序时，优先用
order属性，而非row-reverse（后者会影响 tab 键顺序和屏幕阅读器）
gap 和 flex-wrap 也会悄悄影响对齐表现：开启 flex-wrap: wrap 后，justify-content 只作用于每行内部，跨行整体居中得靠 align-content: center ——这个属性在单行时完全无效，但很多人会下意识把它和 align-items 搞混。
