如何用JavaScript获取换行后Flexbox每行的子项数量？

这确实是个很实用的需求，尤其是做键盘导航这类交互的时候——硬编码数值（比如你提到的-4/-2）在响应式场景下肯定不靠谱。我来给你分享一个通用且不需要依赖媒体查询/固定宽度的方案，不管子项宽度是否一致都能用：

核心思路：利用子项的offsetTop判断行归属 #

Flex布局换行后，同一行内的所有子项在垂直方向的起始位置（offsetTop）是完全相同的；换行后的子项offsetTop会大于上一行的数值。我们可以通过遍历子项、分组相同offsetTop的元素，来得到每行的子项列表。

实现代码 #

首先写一个获取每行子项的工具函数：

function getFlexRows(container) {
  const items = Array.from(container.querySelectorAll('.item'));
  if (!items.length) return [];

  const rows = [];
  let currentRow = [items[0]];
  let currentTop = items[0].offsetTop;

  // 遍历所有子项，按offsetTop分组
  for (let i = 1; i < items.length; i++) {
    const item = items[i];
    if (item.offsetTop === currentTop) {
      currentRow.push(item);
    } else {
      // 换行，把当前行存入结果，开始新行
      rows.push(currentRow);
      currentRow = [item];
      currentTop = item.offsetTop;
    }
  }
  // 别忘了把最后一行加入结果
  rows.push(currentRow);

  return rows;
}

使用示例 #

// 获取容器和行数据
const container = document.querySelector('.container');
const flexRows = getFlexRows(container);

// 打印首行数量
console.log(`首行有 ${flexRows[0].length} 个元素`);

// 打印所有行的数量
flexRows.forEach((row, index) => {
  console.log(`第 ${index + 1} 行有 ${row.length} 个元素`);
});

适配响应式场景（窗口 resize） #

因为窗口大小变化会导致换行断点改变，所以需要监听resize事件，结合防抖函数避免频繁计算：

// 防抖函数，优化resize性能
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 监听窗口变化，更新行数据
window.addEventListener('resize', debounce(() => {
  const updatedRows = getFlexRows(container);
  // 这里更新你的键盘导航逻辑
  updateKeyboardNavigation(updatedRows);
}));

针对你的键盘导航需求优化 #

比如按下下箭头时，找到当前元素正下方的子项：

function getBelowElement(currentItem, rows) {
  let currentRowIdx = -1;
  let currentItemIdx = -1;

  // 定位当前元素所在的行和位置
  for (let i = 0; i < rows.length; i++) {
    const itemIndex = rows[i].indexOf(currentItem);
    if (itemIndex !== -1) {
      currentRowIdx = i;
      currentItemIdx = itemIndex;
      break;
    }
  }

  // 如果不是最后一行，且下一行有对应位置的元素
  if (currentRowIdx < rows.length - 1 && currentItemIdx < rows[currentRowIdx + 1].length) {
    return rows[currentRowIdx + 1][currentItemIdx];
  }

  // 可选：如果下一行没有对应位置，返回下一行第一个元素（根据你的需求调整）
  // return currentRowIdx < rows.length - 1 ? rows[currentRowIdx + 1][0] : null;
  return null;
}

// 在键盘导航逻辑中使用
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') {
    const currentActiveItem = document.querySelector('.item.active');
    const rows = getFlexRows(container);
    const belowItem = getBelowElement(currentActiveItem, rows);
    if (belowItem) {
      currentActiveItem.classList.remove('active');
      belowItem.classList.add('active');
      // 可选：滚动到可视区域
      belowItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }
});

注意事项 #

• offsetTop是相对于元素的offsetParent（最近的定位祖先元素）计算的，只要你的flex容器没有设置position: absolute/relative/fixed之外的定位（默认是static），所有子项的offsetParent都是一致的，结果会准确。
• 如果子项有垂直方向的margin/padding/border，不会影响分组逻辑——同一行的子项offsetTop依然会保持相同。
• 动态添加/删除子项后，需要重新调用getFlexRows方法更新行数据。

这个方案完全基于DOM的实际渲染位置，不需要依赖任何预设的宽度值或媒体查询，不管子项宽度是否一致都能准确工作，完美适配你的起始页键盘导航场景。

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