使用flex-wrap和gap可高效实现弹性卡片布局。1. 容器设为display: flex并启用flex-wrap: wrap实现自动换行；2. 用gap统一设置间距，避免margin错位；3. 卡片通过flex: 1 1 200px等灵活宽度自适应屏幕；4. 结合padding与响应式设计，完整构建美观布局。
要实现弹性布局中的卡片排列，使用 flex-wrap 和 gap 是最简洁高效的方式。它们能让你的卡片在不同屏幕尺寸下自动换行并保持均匀间距，无需额外的 margin 调整或媒体查询。
1. 设置容器为弹性布局并允许换行（flex-wrap）
将父容器设置为 display: flex，并使用 flex-wrap: wrap 允许子元素在空间不足时换行。
关键代码：.container {
display: flex;
flex-wrap: wrap;
}
这样，卡片会在一行放不下时自动折到下一行，而不是被压缩或溢出。
2. 使用 gap 添加卡片之间的间距
在 Flex 容器上使用 gap 属性，可以统一设置行与列之间的间距，避免传统 margin 带来的边缘不对齐问题。
立即学习“前端免费学习笔记（深入）”；
示例：.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 水平和垂直间距均为 16px */
}
gap 会自动在项目之间分配空间，首尾元素与容器边缘的距离也会自然对齐，不需要额外处理。
3. 控制卡片宽度以实现多列布局
每个卡片设置固定宽度或百分比宽度，结合 flex-wrap 实现响应式排列。
常见做法：- 每张卡片设为 width: 20%，一行最多显示 5 张
- 或使用 min-width 配合 flex: 1 1 auto 实现自适应
.card {
flex: 1 1 200px; /* 最小宽度 200px，可伸缩 */
}
这样在窄屏下会自动减少每行卡片数量，宽屏下则铺开，充分利用空间。
4. 完整示例代码
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
<p>.card {
flex: 1 1 200px;
background: #f0f0f0;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
HTML 结构：
<div class="container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <!-- 更多卡片 --> </div>
基本上就这些。flex-wrap 解决换行，gap 解决间距，配合灵活的宽度设置，就能轻松实现美观的响应式卡片布局。不复杂但容易忽略细节。
