17370845950

用 justify-content: space-between 实现左右分布需父容器设 display: flex，仅适用于两个子元素；多元素时会均分间隙，此时可用 margin-left: auto 或 margin-right: auto 手动控制。

要实现左右分布，用 justify-content: space-between 是最直接的方式，但前提是容器必须是 flex 容器，且子元素只有两个（或明确希望首尾撑开）。

确保父容器是 flex 布局

给父元素设置 display: flex，这是启用 flex 排列的前提：

```css
  .container {
    display: flex;
    justify-content: space-between;
  }
```

子元素数量影响效果

space-between 会让第一个子元素贴左、最后一个子元素贴右，中间的空白均匀分配。所以：

• 只有两个子元素时，天然形成“左-右”分布
• 有三个或以上时，会变成“左-中-右”或更分散，不是纯左右
• 如果只想视觉上左右，但实际有多个子项，建议用 margin-left: auto 或 margin-right: auto 手动控制

注意主轴方向

justify-content 控制的是主轴上的对齐。默认主轴是水平（flex-direction: row），所以左右生效；如果改成 column，它就变成上下分布了。不需要改方向时，保持默认即可。

常见小问题提醒

• 子元素不能设 float 或 position: absolute，否则脱离文档流，不参与 flex 分布
• 父容器要有足够宽度，否则可能换行（可加 flex-wrap: nowrap 防止）
• 如果右侧内容被挤到下一行，检查是否子元素总宽超出了容器，或存在 margin/padding 影响计算