flex-direction 决定主轴方向，影响 justify-content 和 align-items 的作用轴；column 时 justify-content 控制垂直居中，align-items 控制水平居中；需检查显式/隐式设置、父容器高度及 align-self 冲突，单子项可用 margin: auto 居中。
确认 flex-direction 是否悄悄改了主轴方向
很多“对齐失效”问题，其实不是属性写错了，而是你或同事在某处写了 flex-direction: column（甚至 row-reverse），结果 justify-content: center 突然开始控制上下居中，而你以为它该管左右——于是发现元素“跑偏”了。
- 打开 Chrome DevTools，选中 Flex 容器，在 Styles 面板里直接搜
flex-direction，确认它的值和你的预期一致 - 如果没显式设置，它就是默认的
row（主轴水平）；一旦改成column，justify-content就管垂直方向，align-items才管水平方向 - 特别注意：CSS 预处理器（如 Sass）或组件库（如 Ant Design）可能在某个 mixin 或 class 里静默覆盖了这个值
检查父容器有没有“可居中的高度”
align-items: center 在交叉轴上居中，但前提是交叉轴有“可分配的空间”。如果父容器高度是 auto（比如只靠一行文字撑开），那它实际高度就等于内容高，自然看不出居中效果——这不是 Flex 失效，是它没空间可居。
- 给父容器加
min-height: 100vh（推荐），而不是height: 100vh，避免内容超长时被截断 - 若嵌套在其他布局中（如 Grid 或另一个 Flex 容器），检查上层是否约束了高度，比如
overflow: hidden或max-height - 用 DevTools 的 Layout 面板看容器的实际渲染尺寸，确认高度不为 0 或远小于预期
排查 align-items 和 align-self 的冲突
align-items 是容器级设置，默认值是 stretch，会让子项在交叉轴方向拉满。如果你看到子元素被莫名撑高、图片变形、文字贴顶，大概率是它在“默默发力”。
- 先在容器上显式设
align-items: center（或flex-start），别依赖默认值 - 检查子元素是否写了
align-self: flex-start、align-self: stretch等——哪怕只加在一个按钮或图标上，也会让它脱离整体对齐规则 - 临时加一句
* { align-self: auto !important; }（仅调试用）可快速判断是否是某个子项覆盖导致的异常
单个子项居中？试试 margin: auto 更省事
当容器里只有一个核心内容（如登录框、模态框主体、404 提示），不用纠结主轴/交叉轴，直接在子项上写 margin: auto，Flex 会自动把它推到两个轴的正中心。
立即学习“前端免费学习笔记（深入）”；
- 适用前提：Flex 容器中**只有一个直系子元素**；多个子项时
margin: auto行为不可控（比如只在主轴生效、或把相邻项挤开） - 它不依赖
flex-direction，row或column下都有效 - 比写
justify-content + align-items更轻量，且不会受父容器高度塌缩影响（只要容器有宽度/高度约束，margin: auto就能生效）
/* 示例：一个居中的登录卡片 */
.login-card {
display: flex;
}
.login-card > .content {
margin: auto;
width: 320px;
}主轴和交叉轴不是固定方向，而是随 flex-direction 动态翻转的坐标系。调试 Flex 布局最常卡住的地方，往往不是代码写错，而是你脑中的“主轴”还停在 row 状态，而实际 DOM 已经是 column 了。
