Flex 布局对齐异常主因是混淆主轴与交叉轴：justify-content 控主轴（方向由 flex-direction 决定），align-items 控单行交叉轴，多行需用 align-content；调试应先确认轴向、行数及容器尺寸。
Flex 布局中子元素对齐不正确，通常是因为 justify-content 和 align-items 的作用对象或取值理解有偏差。这两个属性控制的是 ** 主轴（main axis）** 和 ** 交叉轴（cross axis）** 上的对齐方式，而主轴方向由 flex-direction 决定——这点最容易被忽略。
确认主轴方向再设 justify-content
justify-content 只管主轴上的对齐。如果没生效，先检查容器是否设置了 flex-direction：
- 默认是
row（水平从左到右），此时justify-content控制左右对齐（如center、space-between） - 若设为
column（垂直从上到下），主轴就变成纵向，justify-content就控制上下对齐 - 常见错误：在
column布局下还用justify-content: center想“水平居中”，其实它此时是让子元素在 ** 垂直方向居中 **，水平方向并不受影响
align-items 影响的是单行子项的交叉轴对齐
align-items 默认是 stretch，会让子元素在交叉轴上拉满（除非子元素设了固定宽高）。如果你希望文字或图标 垂直居中 但没效果，可能因为：
- 子元素本身没有内容高度，或设置了
height但未覆盖内边距 / 行高等 - 父容器没设高度，导致
align-items: center缺少参考基准（尤其在flex-direction: column时更明显） - 多个子元素换行（
flex-wrap: wrap）后，align-items仍只作用于每行内部，不能跨行对齐；此时需改用align-content
多行 flex 容器要留意 align-content
当子元素超出一行并换行时，align-items 不再控制行与行之间的间距。align-content 才负责这个：
立即学习 “ 前端免费学习笔记（深入）”；
-
align-content: center—— 多行整体在交叉轴上居中 -
align-content: space-between—— 行之间均匀分布，首尾贴容器边缘 - 注意：
align-content在单行 flex 中无效，且要求容器在交叉轴方向有剩余空间（即容器高度 / 宽度要大于所有子项总和）
调试小技巧：临时加边框和尺寸
对齐异常时，快速定位问题的方法：
- 给父容器加
border: 1px solid red，看是否意外撑开或塌陷 - 给子元素加
background: #eee和padding: 8px，确认实际渲染区域 - 用 浏览器 开发者 工具 检查 computed 样式，重点看
main-size和cross-size是否符合预期 - 尝试强制设置
flex-direction: row或column，排除继承或重置干扰
对齐不是靠猜，而是理清主轴 / 交叉轴、单行 / 多行、容器尺寸这三层关系。调对了 flex-direction，justify-content 和 align-items 才真正“各司其职”。
