通过设置flex-basis百分比和flex-grow，结合min-width与flex-wrap，可实现卡片布局的自适应宽度与响应式换行，确保在不同屏幕下均保持良好视觉效果。
在使用 CSS Flexbox 布局时，实现卡片的自适应宽度是一个常见需求。通过结合 flex-basis 的百分比设置与 flex-grow 属性，可以灵活控制卡片在容器中的初始宽度和扩展行为，让布局既响应式又美观。
flex-basis 设置初始宽度
flex-basis 决定了 flex 项目在分配多余空间前的初始主轴尺寸。当使用百分比值时，它会相对于父容器的主轴尺寸来计算。
例如，若希望每个卡片默认占据容器的 30%，可以这样设置：
- flex-basis: 30%;
这会让所有卡片以 30% 容器宽度为起点进行布局。如果容器中还有剩余空间，这些空间将根据 flex-grow 的设置进行分配。
立即学习“前端免费学习笔记（深入）”；
flex-grow 控制扩展能力
flex-grow 定义了 flex 项目在有剩余空间时的拉伸比例。默认值为 0，表示不扩展；设为 1 或更高，则允许项目放大。
将 flex-grow: 1 与 flex-basis: 30% 结合使用，可以让卡片从 30% 宽度开始，并平等地分享剩余空间。
示例代码：
.card {
flex: 1 1 30%;
margin: 10px;
}
这里 flex: 1 1 30% 是 flex-grow: 1、flex-shrink: 1、flex-basis: 30% 的简写，意味着卡片可伸缩，且初始宽度为 30%。
响应式调整与换行处理
为了在小屏幕上避免卡片被压缩得太窄，建议配合 min-width 使用：
- 给卡片设置 min-width: 250px;
- 当容器太窄时，flex 项目将不再收缩，触发换行（需父容器设置 flex-wrap: wrap）
父容器设置示例：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
这样，在空间不足时，卡片会自动换行，保持良好的可读性和视觉效果。
基本上就这些。通过合理设置 flex-basis 百分比与 flex-grow，再辅以 min-width 和 flex-wrap，就能实现既弹性又可控的卡片布局。不复杂但容易忽略细节。
