17370845950

多模块对齐不整齐的核心原因是容器主轴对齐方式设置错误；需先设 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 覆盖父级设置