用 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










