17370845950

用 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