用 Flex 布局实现卡片自适应排列，核心是容器设 display: flex 和 flex-wrap: wrap，卡片设 flex: 1 1 280px 或 min-width: 280px; flex: 1，并通过媒体查询在不同断点调整 flex-basis 实现单列、双列、三列响应式布局。
用 Flex 布局实现卡片自适应排列，核心是让容器启用 flex-wrap: wrap，同时给卡片设置合理的最小宽度（如 min-width 或结合 flex-basis），让它们在空间不足时自动换行，且每行尽可能填满。
容器设置：启用弹性换行
父容器需设为 flex，并允许子项换行：
-
display: flex启动 Flex 布局 -
flex-wrap: wrap允许卡片折行（不加这句会强行单行溢出） -
gap: 16px（可选）统一卡片间距，比用 margin 更干净
卡片设置：控制最小宽度与弹性行为
卡片本身建议用以下组合，兼顾响应性与整齐感：
-
flex: 1 1 280px—— 等价于flex-grow: 1、flex-shrink: 1、flex-basis: 280px；280px 是推荐的最小卡片宽度（适配移动端竖屏） - 或更明确写法：
min-width: 280px; flex: 1;—— 保证不小于 280px，剩余空间再均分 - 避免只设
width，否则无法自适应缩放；也慎用flex: 0 0 280px（不伸缩），会导致空隙浪费
响应式增强：断点微调最小宽度
不同屏幕下可调整卡片基础宽度，提升利用率：
立即学习“前端免费学习笔记（深入）”；
- 小屏（≤480px）：
flex-basis: 100%→ 单列全宽 - 中屏（481px–768px）：
flex-basis: calc(50% - 8px)→ 每行最多 2 张（gap 16px 时减半留白） - 大屏（≥769px）：
flex-basis: calc(33.333% - 10.666px)→ 每行 3 张（gap 16px 对应三张间两个间隙）
常见问题注意点
实际开发中容易踩坑的地方：
- 卡片内容高度不一致？加
align-items: stretch到容器，让卡片等高 - 换行后最后一行左对齐难看？用
justify-content: space-between或配合伪元素补空格（但更推荐用gap + flex-basis自然对齐） - IE11 兼容？需加
-ms-flex-wrap: wrap和-ms-flex-preferred-size替代flex-basis
