如何用CSS Flexbox实现类表格行的统一换行与宽度对齐

你的核心问题是单个flex容器无法让所有行共享列宽规则，导致换行时机不一致。用CSS Grid可以完美解决这个问题，它能让所有列表项共享同一列布局，实现统一列宽+同步换行的效果。

解决方案代码 #

CSS

.Box {
  padding: 1rem;
  display: grid;
  /* 核心：左侧列占剩余空间，右侧列适配自身最小宽度；当容器宽度不足时自动切换单列 */
  grid-template-columns: minmax(0, min(100% - 120px, 1fr)) fit-content(120px);
  gap: 0.8rem; /* 行间距，可选 */
}

/* 当容器宽度小于临界值时，强制所有行切换为单列布局 */
@media (max-width: 500px) {
  .Box {
    grid-template-columns: 1fr;
  }
}

.Row {
  /* 让Row的子元素直接成为网格项，避免嵌套容器破坏列布局 */
  display: contents;
}

.Fill {
  word-wrap: break-word; /* 允许左侧文本换行，尽可能容纳内容 */
  align-self: center; /* 垂直居中，可选 */
}

.Actions {
  display: flex;
  gap: 0.5rem; /* 操作按钮之间的间距，可选 */
  align-items: center; /* 按钮垂直居中，可选 */
}

HTML

<div class="Box">
  <div class="Row">
    <div class="Fill">
      <span>Some text not too big</span>
    </div>
    <div class="Actions">
      <button>编辑</button>
      <button>删除</button>
    </div>
  </div>
  <div class="Row">
    <div class="Fill">
      <span>Some text that will be absolutely big for real, it can hold more words without breaking early</span>
    </div>
    <div class="Actions">
      <button>编辑</button>
      <button>删除</button>
    </div>
  </div>
</div>

关键逻辑说明 #

1. 统一列宽：.Box作为网格容器，所有.Row的子元素共享同一grid-template-columns规则，左侧列宽度完全一致，像表格列一样整齐。
2. 同步换行：通过min(100% - 120px, 1fr)设定左侧列的最大宽度（120px是右侧操作框的预估最小宽度），当容器宽度不足以同时容纳左右两列时，所有行都会自动切换为单列布局，实现同步换行。
3. 内容适配：minmax(0, ...)允许左侧列收缩，配合word-wrap: break-word让文本自动换行，尽可能容纳更多内容；右侧列用fit-content保证操作按钮不会被压缩变形。

替代方案（表格布局） #

如果你需要兼容极老浏览器，也可以用表格布局，但灵活性不如Grid：

.Box {
  padding: 1rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.8rem;
}

.Row {
  display: table-row;
}

.Fill, .Actions {
  display: table-cell;
}

.Fill {
  width: 100%;
  word-wrap: break-word;
}

.Actions {
  white-space: nowrap; /* 操作按钮不换行 */
}

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