用 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 影响计算
