使用 flexbox 结合 gap 可简洁实现卡片布局。1. 设置容器 display: flex、flex-wrap: wrap 并用 gap 定义间距；2. gap 消除 margin 布局的边界问题，代码更清晰；3. 配合媒体查询动态调整 card 宽度与 gap，实现响应式；4. 注意浏览器兼容性，gap 不支持 ie。推荐现代布局使用此方案。
使用 Flexbox 布局结合 gap 属性，可以轻松实现卡片的整齐排列，并通过 gap 精确控制卡片之间的间距。这种方法比传统使用 margin 或 padding 更加简洁、直观。
1. 基础Flex容器设置
要让卡片在容器中使用 Flexbox 排列，首先需要将父容器设为 display: flex，并启用换行以适应多行卡片：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px; /* 设置卡片间间距 */
}
.card {
flex: 0 0 calc(33.333% - 16px); /* 每行显示3张卡片，减去gap影响 */
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
}
说明：
- flex-wrap: wrap 让卡片在空间不足时自动换行。
- gap: 16px 同时设置横向和纵向的间距，无需额外处理 margin。
- calc(33.333% - 16px) 确保三列布局中扣除间隙后的宽度正确。
2. 使用gap替代margin的优势
以往通常用 margin 控制卡片间距，但会导致首尾元素贴边或需额外清除（clearfix）。而 gap 自动处理这些情况：
- gap 不会影响容器边缘，第一行/列与容器之间不会多出多余间距
- 代码更简洁，无需对第一个或最后一个元素写特殊规则
- 支持响应式调整，配合媒体查询动态改变 gap 值
3. 响应式卡片布局示例
结合媒体查询，可让卡片在不同屏幕下自适应列数，并动态调整间距：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
<p>/<em> 小屏幕：每行1张 </em>/
@media (max-width: 600px) {
.card {
flex: 0 0 100%;
}
.container {
gap: 12px;
}
}</p><p>/<em> 中等屏幕：每行2张 </em>/
@media (min-width: 601px) and (max-width: 900px) {
.card {
flex: 0 0 calc(50% - 16px);
}
}</p><p>/<em> 大屏幕：每行3张 </em>/
@media (min-width: 901px) {
.card {
flex: 0 0 calc(33.333% - 16px);
}
}</p>4. 注意事项
使用 gap 时需注意以下几点：
- gap 在 Flexbox 和 Grid 布局中都可用，但在旧版浏览器（如 IE）中不支持
- 如果需要兼容性更好，可降级使用 margin 配合
:not(:last-child)等选择器 - gap 支持两个值：
gap: 10px 20px分别表示 row-gap 和 column-gap
基本上就这些。用 Flexbox 加 gap 制作卡片布局，结构清晰，维护方便，是现代 CSS 布局的推荐方式。
