CSS中justify-content: space-between首尾贴边中间等距（两端元素紧贴左右边缘，中间元素等距均匀分布）

justify-content: space-between; 是 CSS Flexbox 布局中的一个属性值，主要作用是在弹性容器的主轴方向上均匀分布子元素，具有以下核心特性：

作用效果：

1. 首尾贴边

   • 第一个子元素紧贴容器起始端

   • 最后一个子元素紧贴容器结束端

2. 中间等距

   • 剩余的子元素在容器中平均分布

   • 相邻子元素之间的间距完全相等（自动计算）

可视化示例：

css

复制

下载

.container {display: flex;justify-content: space-between; /* 关键属性 */
}

复制

下载

[元素1]            [元素2]            [元素3]
|← 等间距 →|     |← 等间距 →|
|←---------------- 容器宽度 -----------------→|

• 元素1左对齐，元素3右对齐

• 元素2在剩余空间居中（间距自动相等）

适用场景：

1. 导航栏菜单
   左侧Logo + 右侧用户菜单（中间无内容时自动拉开距离）

2. 卡片布局
   多列卡片两端对齐且间距相等

3. 响应式布局
   屏幕宽度变化时，元素间距自动调整

对比其他值：

属性值	效果
flex-start	所有元素靠左/上（默认）
flex-end	所有元素靠右/下
center	所有元素居中
space-around	每个元素两侧间距相等（含首尾）
space-evenly	所有间距完全相等（含首尾间隙）

注意事项：

• 仅当容器宽度 > 子元素总宽度时生效（有空余空间可分配）

• 主轴方向由 flex-direction 决定（默认横向排列）

• 子元素间距计算公式：
  剩余空间 = 容器宽度 - 所有子元素宽度总和
间距 = 剩余空间 / (子元素数量 - 1)

⚠️ 单行元素较少时可能导致中间间距过大，此时可考虑 space-around 或结合 margin 微调。