CSS gap 属性在Flexbox中的应用
CSS gap在Flexbox中：设置flex项目间距（替代margin）、row-gap/column-gap分别设置、与旧版grid-gap的关系、浏览器兼容性（较新特性） · 难度：入门 · +10XP
CSS Flexbox gap —— 多行间距精细化控制
flexbox的gap属性不仅控制列之间的间距，当flex-wrap:wrap时还控制行之间的间距。可以分别设置row-gap和column-gap。
分别控制
.flex-wrap-container {
display: flex;
flex-wrap: wrap;
gap: 20px 30px; /* row-gap:20px(行间距), column-gap:30px(列间距) */
}
/* 等价于 */
.flex-wrap-container {
row-gap: 20px;
column-gap: 30px;
}gap vs margin的优势
| gap | margin |
|---|---|
| 只在元素之间，不触及容器边缘 | 所有方向都有间距，包括边缘 |
| 一行搞定所有间距 | 要处理首尾元素的多余margin |
| Flexbox和Grid通用 | 所有布局都支持 |
动手练习
- 基础练习：做一个自动换行的标签云，用gap统一间距。
- 进阶应用：用row-gap和column-gap分别控制卡片网格的行列间距。
- 项目实战：把项目中所有用margin做间距的flexwrap布局统一改用gap。