CSS Flexbox gap 间距属性

Flexbox gap属性深入（替代margin间距的现代方案）：gap/row-gap/column-gap在flex容器中设定子元素间距、与Grid gap属性通用、与margin方案对比（无外边距合并/不触及容器边缘） · 难度：入门 · +10XP

CSS Flexbox gap —— 告别 margin 间距

以前在Flexbox中给子元素加间距，要在每个子元素上加margin，还要处理第一个和最后一个的额外margin。gap属性一步到位。

基本用法

.flex-container {
  display: flex;
  gap: 20px;  /* 所有子元素之间统一间距 */
}

gap同时作用于水平和垂直方向。如果flex-wrap换行，行之间也有间距。

分别设置行列间距

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;  /* row-gap:20px, column-gap:30px */
}

gap vs margin 对比

动手练习

1. 基础练习：把之前用margin做间距的Flexbox布局全部改成gap。
2. 进阶应用：做一个标签云——用flex-wrap+gap，标签自动换行且间距均匀。
3. 项目实战：检查项目中所有flex布局，统一改用gap替代margin做间距。