Web响应式：列表自适应布局

---

1️⃣ CSS Flexbox 布局

思路 ：使用 display: flex; flex-wrap: wrap;，列表项自动换行。

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 间距 */
}

.item {
  flex: 1 1 200px; /* 最小宽度200px，自动增长 */
}

特点：

• 自动换行
• 列宽可固定或自适应
• 简单易用

优点：

• 兼容性好
• 适合一维布局（行或列）

缺点：

• 控制复杂的网格（不同列数）不够灵活

---

2️⃣ CSS Grid 布局

思路 ：使用 display: grid; 配合 auto-fit 或 auto-fill 实现自适应列数。

.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

特点：

• 自动根据容器宽度调整列数
• 每个单元格最小 220px，最大自动填满
• 完全响应式

优点：

• 灵活控制列宽和间距
• 可实现复杂网格布局

缺点：

• IE11 支持有限（现代项目一般无碍）

---

3️⃣ 多列布局（CSS Columns）

.list {
  column-width: 220px; /* 每列最小宽度 */
  column-gap: 16px;
}

.item {
  break-inside: avoid;
}

特点：

• 自动分列，列表项竖向排列
• 类似瀑布流效果（Pinterest）

优点：

• 简单实现纵向瀑布流
• 自动填满剩余列

缺点：

• 不支持行高精确控制
• 复杂交互或动画不适合

---

4️⃣ 响应式媒体查询 + 固定宽度/百分比

.item {
  width: 100%;
}

@media (min-width: 600px) { .item { width: 48%; } }
@media (min-width: 900px) { .item { width: 31%; } }
@media (min-width: 1200px) { .item { width: 23%; } }

特点：

• 通过屏幕宽度调整列数
• 控制精确

优点：

• 兼容性最佳
• 对老浏览器友好

缺点：

• 维护大量 media query
• 不如 Grid/Flex 自动适配灵活

---

5️⃣ JavaScript 动态计算列数（可选）

思路：

• 获取容器宽度和单元最小宽度
• 动态计算列数并调整样式

const container = document.querySelector('.list');
const item = document.querySelector('.item');
const minWidth = 220;
const gap = 16;

function resizeGrid() {
  const cols = Math.floor(container.clientWidth / (minWidth + gap));
  container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
}

window.addEventListener('resize', resizeGrid);
resizeGrid();

特点：

• 更精细控制列数和间距
• 可实现自定义算法（如瀑布流高度优化）

优点：

• 完全自定义布局
• 可兼容旧浏览器

缺点：

• 需要 JS，增加性能开销
• 实现比纯 CSS 复杂

---

✅ 推荐方案

场景	推荐方案
简单响应式列表	Flexbox
网格布局，自动列宽	CSS Grid（auto-fit/minmax）
瀑布流布局	CSS Columns 或 JS 瀑布流
老浏览器支持	Media Queries + 百分比/固定宽度

---