<p>使用 flex-wrap: wrap 和 flex-basis 可实现响应式卡片堆叠，父容器设为 display: flex; flex-wrap: wrap; 确保换行，卡片通过 flex-basis 设置基础宽度（如 300px 或 calc(33.333% - 20px)），配合 gap 控制间距，flex: 1 1 300px 允许伸缩，小屏自动换行，最小宽度可用 min-width 限制，实现多设备适配。</p>
在CSS中实现响应式卡片堆叠，关键是让卡片容器根据屏幕宽度自动换行，并控制每张卡片的基础宽度。通过 flex-wrap: wrap 和 flex-basis 的组合，可以轻松达成这一目标。
使用 flex-wrap: wrap 实现自动换行
将父容器设置为 Flex 布局，并启用换行功能，这样当子元素超出容器宽度时会自动折到下一行。
关键代码：- display: flex;
- flex-wrap: wrap;
这确保了卡片不会被压缩或溢出容器，而是自然地堆叠成多行。
用 flex-basis 控制卡片基础宽度
flex-basis 决定每个卡片在主轴上的初始宽度。配合 min-width 或 max-width 可以更灵活地响应不同屏幕尺寸。
立即学习“前端免费学习笔记（深入）”；
- 设置固定值：flex-basis: 300px;（每张卡至少300px宽）
- 使用百分比：flex-basis: calc(33.333% - 20px);（一行最多三张，带间距）
- 结合 minmax() 使用：flex-basis: minmax(250px, 1fr); 更现代的写法
推荐使用带有计算的百分比或 minmax，使卡片在小屏幕上自动缩小并换行。
完整示例代码
以下是一个实用的响应式卡片布局结构：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
<p>.card {
flex: 1 1 300px; /<em> grow | shrink | basis </em>/
background: #f4f4f4;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}</p>这里 flex: 1 1 300px 表示每张卡片默认300px宽，可伸缩，空间不足时自动换行。屏幕越小，每行显示的卡片越少，最小可至一列堆叠。
适配移动端的小技巧
- 给 .card 设置 min-width: 250px; 防止过度压缩
- 使用 gap 而不是 margin 管理间距，更简洁
- 必要时添加媒体查询微调：比如在超小屏强制 flex-basis: 100%
基本上就这些。不复杂但容易忽略细节。只要掌握 flex-wrap 和 flex-basis 的协同作用，就能做出流畅的响应式卡片布局。
