多模块对齐不整齐的核心原因是容器主轴对齐方式设置错误；需先设 display: flex，再用 justify-content 控制水平对齐，并配合 align-items 处理垂直对齐，同时避免子项宽高或 margin 干扰。
多模块对齐不整齐，核心问题往往出在容器的主轴对齐方式没设对。用 flex 的 justify-content 能快速统一水平方向排列，但得先确保父容器是 flex 布局、子元素是 flex 项目。
确认父容器已启用 flex 布局
只写 justify-content 不生效，是因为它只在 flex 容器里起作用。必须先给父元素设置 display: flex
：
- 检查 CSS 中是否漏了
display: flex或display: inline-flex - 避免被其他样式（比如
float、position: absolute）干扰布局流 - 如果用了 Grid 或 Block 布局，
justify-content不会按预期工作
根据场景选对 justify-content 值
不同对齐需求对应不同取值，别硬套“居中”：
- justify-content: flex-start —— 左对齐（默认值，适合导航栏、表单控件左排）
- justify-content: center —— 居中（常用于 banner 下的按钮组、登录框内操作按钮）
- justify-content: space-between —— 首尾贴边，中间等距（适合三栏功能入口、步骤条）
-
justify-content: space-evenly —— 所有间隙相等（比
space-around更匀称，适合图标导航）
注意子元素宽度和 margin 干扰
即使 justify-content 设对了，模块仍歪斜，大概率是子项自身“不守规矩”：
- 检查子元素是否有固定宽高或
flex-basis冲突，导致实际占用空间不一致 - 避免给子项设
margin-left/right（尤其在space-between下会破坏等距逻辑） - 用
flex: 1或flex: 0 1 auto让子项自适应，比手动设 width 更可靠
垂直方向也要同步处理
水平对齐整齐了，但上下参差？那是没管好交叉轴：
- 加
align-items: center让所有子模块在交叉轴（默认为垂直方向）上居中对齐 - 若模块高度不一，用
align-items: stretch（默认）可拉平高度；需要保留原始高度就改用flex-start - 单独调整某个子项垂直位置，可用
align-self覆盖父级设置
