设置父容器display: flex并启用flex-wrap: wrap实现换行，配合gap设置间距；2. 子项通过min-width和flex属性控制最小宽度与伸缩性，确保在不同屏幕下合理布局；3. 可选媒体查询调整小屏下的卡片尺寸，提升响应式体验。
要实现卡片在容器中自动换行，使用 CSS 的 Flexbox 布局非常方便。关键在于设置父容器为 flex 并允许换行，同时控制子项的最小宽度或固定尺寸。
1. 设置父容器为 Flex 并启用换行
将卡片的容器设置为 display: flex，并添加 flex-wrap: wrap，这样当子元素超出容器宽度时会自动换行。
示例代码：.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 卡片之间的间距 */
padding: 16px;
}2. 控制卡片的尺寸
为了让卡片在不同屏幕下合理换行，可以设置卡片的 flex 属性或使用 min-width 结合 flex-grow。
常用方法：- 使用 flex: 1 1 200px：表示每个卡片最小宽度为 200px，可伸缩。
- 使用 min-width: 250px 配合 flex: 0 1 auto：固定最小宽度，不强制拉伸。
示例卡片样式：
立即学习“前端免费学习笔记（深入）”；
.card {
min-width: 250px;
flex: 1 1 250px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background-color: #f9f9f9;
}3. 响应式适配（可选）
在小屏幕上，可以通过媒体查询调整卡片的最小宽度，以适应更窄的视口。
@media (max-width: 768px) {
.card {
min-width: 180px;
flex: 1 1 180px;
}
}基本上就这些。只要父容器开启 flex-wrap: wrap，再合理设置子项宽度，卡片就能自动换行，布局灵活且响应式友好。
