如何限制flex-wrap布局中动态列表的可见行数？

当然有办法！针对你这种用flex-wrap: wrap实现动态换行、项数在2-20之间变化，还想限制可见行数（比如2行）的需求，我有两个实用方案，分别适配不同场景：

方案一：纯CSS实现（适合项高度固定的场景） #

如果你的flex项高度是固定值，那用CSS就能轻松搞定。核心思路是：给flex容器设置max-height，让它刚好容纳指定行数的内容，再配合overflow: hidden隐藏超出的部分。

需要注意的是，max-height的计算要包含项的高度和项之间的gap（如果有的话）。比如你想显示2行，每个项高50px，gap是10px，那容器的max-height就是 2*50px + 1*10px = 110px（因为2行只有1个垂直gap）。

示例代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项之间的间距 */
  max-height: calc(2 * 50px + 1 * 10px); /* 精确计算容纳2行的高度 */
  overflow: hidden; /* 隐藏超出的行 */
  padding: 8px; /* 如果有padding，要把它也加入max-height的计算哦 */
}

.flex-item {
  height: 50px; /* 固定项高 */
  min-width: 120px; /* 让项随视口宽度自动调整数量 */
  background: #f0f0f0;
  border-radius: 4px;
}

这个方案的优点是无需JS，性能好；缺点是依赖固定的项高，不适合高度动态变化的场景。

方案二：JavaScript动态计算（适合项高度不固定或响应式场景） #

如果你的flex项高度不固定，或者需要适配不同视口下的行高变化，那用JS动态计算容器的max-height是更稳妥的选择。

核心思路是：等页面布局完成后，获取单个项的实际高度和容器的gap，然后根据指定行数计算出容器的最大高度，再设置overflow: hidden。同时监听视口 resize 事件，确保窗口变化时高度能重新计算。

示例代码：

<div class="flex-container">
  <!-- 这里是动态生成的flex项 -->
  <div class="flex-item">项1</div>
  <div class="flex-item">项2</div>
  <!-- ...更多项 -->
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
}

.flex-item {
  min-width: 120px;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 12px;
}

const container = document.querySelector('.flex-container');
const targetRowCount = 2; // 你想要限制的行数

// 计算并设置容器最大高度的函数
function setMaxHeight() {
  const items = container.querySelectorAll('.flex-item');
  if (items.length === 0) return;

  // 获取单个项的实际高度（包含padding、border）
  const itemHeight = items[0].offsetHeight;
  // 获取容器的gap值（转为数字）
  const gapValue = parseInt(getComputedStyle(container).gap);
  // 计算容器的max-height：行数*项高 + (行数-1)*gap + 容器的上下padding
  const containerPadding = parseInt(getComputedStyle(container).paddingTop) + parseInt(getComputedStyle(container).paddingBottom);
  const maxHeight = targetRowCount * itemHeight + (targetRowCount - 1) * gapValue + containerPadding;

  container.style.maxHeight = `${maxHeight}px`;
  container.style.overflow = 'hidden';
}

// 页面加载完成后执行
window.addEventListener('load', setMaxHeight);
// 视口大小变化时重新计算
window.addEventListener('resize', setMaxHeight);

这个方案的优点是适配性强，不管项高怎么变都能准确限制行数；缺点是需要一点JS代码，不过逻辑很简单，维护成本不高。

额外小技巧：添加“查看更多”按钮 #

如果需要让用户能看到隐藏的内容，可以在容器下方加一个“查看更多”按钮，点击时移除max-height和overflow属性，展开所有内容：

const showMoreBtn = document.querySelector('.show-more-btn');
showMoreBtn.addEventListener('click', () => {
  if (container.style.maxHeight) {
    container.style.maxHeight = '';
    container.style.overflow = '';
    showMoreBtn.textContent = '收起';
  } else {
    setMaxHeight();
    showMoreBtn.textContent = '查看更多';
  }
});

内容的提问来源于stack exchange，提问作者Fellow Stranger