CSS Flexbox 如何实现等间距布局？

Question

仓乃文 · Accepted Answer

Flexbox 实现等间距布局非常简洁，核心是 justify-content 的 space 系列值和 gap 属性。

基础等间距：
```css
.container {
  display: flex;
  justify-content: space-between;  /* 两端对齐，中间等间距 */
}
```

带边距的等间距（首尾也有间距）：
```css
.container {
  display: flex;
  justify-content: space-evenly;   /* 所有间距相等，包括首尾 */
}
```

固定间距（推荐，最直观）：
```css
.container {
  display: flex;
  gap: 20px;                      /* 统一间距，不受 item 数量影响 */
}
```

补充说明：
- space-between：首尾贴边，中间等间距分布
- space-evenly：所有间隙都相等，包括首尾
- space-around：每个 item 两侧间距相等，首尾间距是中间的一半
- gap 属性更直观，不受 justify-content 影响，推荐优先使用