Flex布局对齐需先确认主轴方向：flex-direction决定主轴（row为水平，column为垂直），justify-content控制主轴对齐，align-items控制交叉轴对齐；主轴变化时二者作用方向同步改变。
先确认主轴方向，再选对齐属性
Flex 布局中所有对齐行为都围绕“主轴”和“交叉轴”展开。而主轴方向完全由 flex-direction 决定，不是默认就是水平的——它可能被你主动改成了垂直、反向或翻转。一旦主轴变了，justify-content 和 align-items 的作用方向也会跟着变。
比如：
- flex-direction: row（默认）→ 主轴水平 → justify-content 控制左右，align-items 控制上下
- flex-direction: column → 主轴垂直 → justify-content 控制上下，align-items 控制左右
- flex-direction: row-reverse 或 column-reverse → 主轴方向不变，但排列顺序反转，justify-content: flex-start 会跑到右边或底部
常见对齐反了的典型场景
你写 justify-content: center 却没看到水平居中？或者设了 align-items: center 结果元素反而贴顶？很可能是主轴方向和你预期不一致。
检查这几处：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否意外加了
flex-direction: column（比如从某组件库继承的样式） - 是否用了
flex-flow: column wrap这类简写，悄悄改了主轴 - 子元素上有没有
align-self覆盖了容器设置，造成局部“反向”错觉
快速验证与修正方法
不用猜，用三步定位问题：
- 在浏览器开发者工具中，选中 Flex 容器，看 computed 面板里 flex-direction 的实际值
- 打开“Layout”或“Flexbox”调试视图（Chrome/Edge 支持），它会直接标出主轴箭头和交叉轴方向
- 临时加一句
outline: 1px solid red到容器，再加font-size: 12px; color: #999;到子元素，肉眼观察排列走向
确认后，按需调整：
- 想让 justify-content 回到管“水平”的角色？删掉或重置
flex-direction为row - 想保留垂直布局但让文字水平居中？改用
align-items: center（此时它管的就是水平方向） - 需要顶部对齐但当前是
justify-content: flex-start却跑到底部？说明主轴是column-reverse，换成flex-end或直接切回column
避免混淆的小技巧
每次写 Flex 对齐前，默念一句：“主轴在哪，justify 就管哪；剩下那个方向，归 align-items 管。”
更直观的做法：在 CSS 里把主轴方向显式写出来，不依赖默认值：
- 横向布局就写
flex-direction: row（哪怕它是默认值） - 纵向布局就写
flex-direction: column，别只靠注释提醒自己 - 团队协作时，在容器类名里体现方向，比如
.flex-col、.flex-row-center
