CSS能否实现智能flex-wrap，让换行后多行元素宽度尽可能相近

实现方案说明 #

原生Flexbox的默认换行逻辑不支持自动计算元素分配实现两行宽度均衡，你需要通过以下两种方案实现需求：

方案1：JavaScript动态计算（推荐，适配动态场景） #

核心逻辑是实时计算所有子元素的总宽度，找到最优拆分点，让两行宽度尽可能接近，再强制拆分：

function balanceFlexRows(container) {
  const children = Array.from(container.children);
  // 计算每个元素的宽度（如果有间距需要额外加上gap/margin的宽度）
  const itemWidths = children.map(el => el.offsetWidth);
  const totalWidth = itemWidths.reduce((a, b) => a + b, 0);
  const targetLineWidth = totalWidth / 2;
  // 查找最优拆分点
  let currentSum = 0, splitIndex = 0;
  for (let i = 0; i < itemWidths.length; i++) {
    if (currentSum + itemWidths[i] > targetLineWidth) {
      splitIndex = i;
      break;
    }
    currentSum += itemWidths[i];
  }
  // 重置所有元素的换行标记
  children.forEach(el => el.style.breakBefore = 'auto');
  // 给拆分点后的第一个元素添加强制换行属性
  if (splitIndex > 0 && splitIndex < children.length) {
    children[splitIndex].style.breakBefore = 'always';
  }
}

// 初始化并绑定容器宽度变化监听
const container = document.querySelector('.container');
const resizeObserver = new ResizeObserver(() => balanceFlexRows(container));
resizeObserver.observe(container);

对应的CSS需要调整容器高度为自适应，避免固定高度截断内容：

.container {
  width: 100%;
  background-color: rgba(35, 35, 35, 0.1);
  min-height: 90px; /* 替换原来的固定height */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* 其余子元素样式保留原有设置即可 */

方案2：CSS媒体查询适配（无JS，适配固定场景） #

如果你的子元素宽度、数量都是固定的，可以预先计算断点阈值，到对应宽度时强制指定换行位置：

/* 示例：当容器宽度小于800px时，让f元素强制换行，实现两行均衡 */
@media (max-width: 800px) {
  .f {
    break-before: always;
  }
}

该方案不需要额外JS逻辑，但适配范围窄，无法适配元素宽度、数量动态变化的场景。

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