justify-content: space-between; 是 CSS Flexbox 布局中用于在容器主轴方向上均匀分布子元素的属性值，其核心特性如下：
首尾贴边
第一个子元素紧贴容器起始端，最后一个子元素紧贴容器结束端。 12
中间等距
剩余的子元素在容器中平均分配间距，间距自动计算。 12
适用场景
- 导航栏布局：左侧Logo + 右侧用户菜单（中间无内容时自动拉开距离）。
- 卡片布局：多列卡片两端对齐且间距相等。 12
- 响应式布局：屏幕宽度变化时，元素间距自动调整。 1
注意事项
- 仅当容器宽度 > 子元素总宽度时生效（有空余空间可分配）。
- 主轴方向由
flex-direction决定（默认横向排列）。 1 - 子元素间距计算公式：剩余空间 = 容器宽度 - 所有子元素宽度总和；间距 = 剩余空间 / (子元素数量 - 1)。 1
对比其他值
-
flex-start：所有元素靠左/上（默认）。 -
flex-end：所有元素靠右/下。 -
center：所有元素居中。 -
space-around：每个元素两侧间距相等（含首尾）。 -
space-evenly：所有间距完全相等（含首尾间隙）。