如何重新排序百分比宽度的Flex项，使每行宽度总和为100%？

核心思路 #

无需依赖第三方库，直接通过数组排序+贪心算法实现：先将DOM元素映射为带宽度数值的对象数组，再通过自定义逻辑筛选排序，最后重新排列DOM元素即可。

具体步骤 #

1. 数据预处理 #

把每个Flex项的宽度（字符串格式如33%）转为数值（如33），同时绑定对应的DOM元素，生成便于处理的数组：

const container = document.querySelector('.flex-container');
const itemData = Array.from(container.children).map(el => {
  // 从计算样式或内联样式中提取宽度数值
  const widthVal = parseInt(getComputedStyle(el).width);
  return { width: widthVal, element: el };
});

2. 自定义排序逻辑（贪心策略） #

循环处理数组，每次优先选择能填满当前行剩余宽度且与上一项宽度不同的元素；若没有，则选最接近剩余宽度的非同类元素；最后才选同类元素，同时重置行剩余宽度：

const sortedItems = [];
let remainingWidth = 100;
let lastUsedWidth = null;

while (itemData.length > 0) {
  let targetIndex = -1;

  // 优先找能刚好填满剩余宽度且非同类的项
  targetIndex = itemData.findIndex(item => {
    return item.width === remainingWidth && item.width !== lastUsedWidth;
  });

  if (targetIndex === -1) {
    // 筛选出小于剩余宽度的非同类项，选最大的那个
    const validCandidates = itemData.filter(item => {
      return item.width < remainingWidth && item.width !== lastUsedWidth;
    });
    if (validCandidates.length > 0) {
      const widestCandidate = validCandidates.reduce((a, b) => a.width > b.width ? a : b);
      targetIndex = itemData.indexOf(widestCandidate);
    } else {
      // 无合适非同类项，选第一个同类项或剩余项
      targetIndex = itemData.findIndex(item => item.width === lastUsedWidth) || 0;
    }
  }

  // 取出选中项，更新状态
  const selected = itemData.splice(targetIndex, 1)[0];
  sortedItems.push(selected);
  remainingWidth -= selected.width;
  lastUsedWidth = selected.width;

  // 当前行填满，重置剩余宽度和上一项记录
  if (remainingWidth <= 0) {
    remainingWidth = 100;
    lastUsedWidth = null;
  }
}

3. 重排DOM元素 #

按排序后的数组顺序，将元素重新插入容器：

sortedItems.forEach(item => {
  container.appendChild(item.element);
});

优化方向 #

• 优先处理100%宽度的项：这类项独占一行，可提前从数组中取出放在结果数组的开头或合适位置，避免干扰其他组合的匹配
• 适配33%+33%+33%组合：当剩余宽度为66时，可优先匹配33%的项（即使上一项是33%，因为需要凑满整行）
• 调整权重：如果希望同类项分散优先级更高，可在筛选时优先排除同类项，即使需要牺牲一点行宽填充率

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