使用flex-wrap: wrap与flex: 1 1 300px可实现响应式卡片堆叠，容器设display: flex和flex-wrap: wrap启用换行，子项通过flex属性在不同屏幕下自动调整列数，结合媒体查询可优化移动端表现。
使用CSS Flexbox制作响应式卡片堆叠，关键在于flex-wrap: wrap与子元素flex属性的配合。通过合理设置容器的弹性换行和子项的尺寸控制，可以让卡片在不同屏幕下自动排列成单列或多列布局。
设置容器启用换行（flex-wrap: wrap）
要让卡片在空间不足时自动换行，父容器必须启用换行功能。
- 将容器的
display设为flex - 设置
flex-wrap: wrap允许子元素换行 - 可选：
justify-content控制主轴对齐方式，如space-between或center
示例代码：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 卡片间距 */
}
控制卡片宽度与弹性（flex属性）
卡片的响应式行为由其flex属性决定。常用写法是flex: 1 1 [基础宽度]，兼顾伸缩性与最小尺寸。
立即学习“前端免费学习笔记（深入）”；
-
flex-basis设定初始宽度，例如300px或25% -
flex-grow允许扩展以填充剩余空间 -
flex-shrink控制是否压缩，避免过度挤压
推荐设置：
.card {
flex: 1 1 300px; /* 在300px基础上伸缩 */
}
这样在宽屏下每行尽可能多放卡片，在窄屏下自动减少每行数量甚至变为单列堆叠。
结合媒体查询微调断点（可选增强）
虽然flex-wrap本身已具备响应性，但可通过媒体查询进一步优化特定屏幕下的表现。
@media (max-width: 768px) {
.card {
flex: 1 1 220px; /* 小屏下调小基础宽度 */
}
}
<p>@media (max-width: 480px) {
.container {
padding: 10px;
}
}</p>这类调整能更好适配移动端，防止卡片过小或间距过大。
基本上就这些。用flex-wrap: wrap加flex: 1 1 min-width的组合，就能实现自然流畅的响应式卡片堆叠，无需额外JavaScript，兼容性好且维护简单。
