如何用纯CSS实现动态flex/grid布局每行最后一项填满剩余空间

方案1：高版本浏览器纯CSS原生实现（推荐） #

借助CSS Grid Level 3 新增的:nth-last-col()选择器，可以直接选中网格布局中每行的最后一列元素，完全满足动态宽度、动态子项数量的需求，无需提前判断行尾元素。

实现代码如下：

.container {
  display: grid;
  /* 自动根据子项内容宽度生成列 */
  grid-template-columns: repeat(auto-fill, minmax(min-content, max-content));
  gap: 0.75rem;
  /* 容器宽度支持动态设置为100%或任意值 */
  width: 350px;
}

.container > div {
  /* 原有样式保持不变 */
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}

/* 选中每行最后一个子项，设置宽度占满剩余空间 */
.container > div:nth-last-col(1) {
  width: 100%;
}

兼容性说明：支持Chrome 123+、Edge 123+、Safari 17.4+版本浏览器，适合可控制终端浏览器版本的场景使用。

方案2：全兼容降级方案 #

如果需要兼容更低版本浏览器，可以使用flex布局的近似实现，效果为每行所有子项均匀分配剩余空间，同时保证子项不会被压缩到小于自身内容宽度：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 350px;
}

.container > div {
  /* 核心设置：允许拉伸，不允许压缩到小于内容宽度 */
  flex: 1 1 fit-content;
  /* 原有样式保持不变 */
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}

兼容性说明：支持所有现代浏览器，包括Chrome、Firefox、Safari、Edge的低版本。

方案3：兼容旧浏览器的严格实现 #

如果必须严格实现仅每行最后一个子项拉伸、同时兼容低版本浏览器，需要配合极少量JS实现：

const fillLastChild = () => {
  const container = document.querySelector('.container')
  const items = Array.from(container.children)
  // 先清除所有之前添加的flex-grow属性
  items.forEach(item => item.style.flexGrow = 0)
  // 遍历判断行尾元素
  let lastTop = items[0]?.offsetTop
  for (let i = 1; i < items.length; i++) {
    const currentTop = items[i].offsetTop
    if (currentTop !== lastTop) {
      items[i-1].style.flexGrow = 1
      lastTop = currentTop
    }
  }
  // 单独处理最后一行的最后一个元素
  items[items.length - 1].style.flexGrow = 1
}
// 初始化+监听容器尺寸变化触发重计算
fillLastChild()
new ResizeObserver(fillLastChild).observe(document.querySelector('.container'))

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