基于基准尺寸的Flex列宽适配：合并单元格实现均匀布局

我正尝试创建一个简单的网格布局，却遇到了一个难题：当多个单元格相邻时，如何将其中多个单元格合并为一个，使整体布局看起来均匀一致？

当前布局示意图：

期望实现的效果：

我希望方案具备通用性，能够适配不同分辨率等场景，因此不确定flex-grow是否是最佳选择。目前测试发现，第一行设置flex-grow: 160有效，最后一行设置flex-grow: 2也能达到效果，但这是否是合理方案？如果遇到如ab+bcd+e这类多样的合并场景，难道要为每种情况都计算对应的flex-grow值？能否让Flex直接基于「X个单元格的基准尺寸」来调整宽度？

附代码片段：

CSS代码 #

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 460px;
  outline: solid 1px #000;
}

.cell {
  display: flex;
  margin: 10px;
  padding: 10px;
  background: #eee;
  flex: 1 0 70px;
  max-width: 100%;
}

HTML代码 #

<div class="row">
  <div class="cell">auto with adjust</div>
  <div class="cell">auto with adjust</div>
</div>
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
  <div class="cell">d</div>
  <div class="cell">e</div>
  <div class="cell">auto new line + auto full width</div>
</div>
<div class="row">
  <div class="cell" style="outline: solid 1px red;">a+b+c+d</div>
  <div class="cell">e</div>
</div>
<div class="row">
  <div class="cell">a+b</div>
  <div class="cell" style="outline: solid 1px red;">c+d+e</div>
</div>

用Flex实现这种“合并单元格”的均匀布局，不建议用固定数值的flex-grow，因为它无法自适应不同分辨率和动态场景。更通用的方案是基于单元格的基准尺寸来计算宽度，具体实现如下：

核心思路 #

单个单元格的总占位宽度是「内容宽度+左右margin」，合并N个单元格的元素，宽度应等于「N个单元格总占位宽度 - 自身左右margin」。用CSS变量结合calc可以实现动态计算，无需手动调整数值。

优化后的代码 #

CSS部分 #

* {
  box-sizing: border-box;
}

:root {
  --cell-content: 70px; /* 单元格内容基础宽度 */
  --cell-margin: 10px; /* 单元格外边距 */
  --cell-total: calc(var(--cell-content) + var(--cell-margin) * 2); /* 单个单元格总占位宽度 */
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 460px;
  outline: solid 1px #000;
}

.cell {
  display: flex;
  margin: var(--cell-margin);
  padding: 10px;
  background: #eee;
  flex: 0 0 var(--cell-content);
  max-width: 100%;
}

/* 对应合并N个单元格的类 */
.cell-2 {
  flex: 0 0 calc(var(--cell-total) * 2 - var(--cell-margin) * 2);
}
.cell-3 {
  flex: 0 0 calc(var(--cell-total) * 3 - var(--cell-margin) * 2);
}
.cell-4 {
  flex: 0 0 calc(var(--cell-total) * 4 - var(--cell-margin) * 2);
}
.cell-5 {
  flex: 0 0 calc(var(--cell-total) * 5 - var(--cell-margin) * 2);
}

HTML部分 #

<div class="row">
  <div class="cell">auto with adjust</div>
  <div class="cell">auto with adjust</div>
</div>
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
  <div class="cell">d</div>
  <div class="cell">e</div>
  <div class="cell cell-5">auto new line + auto full width</div>
</div>
<div class="row">
  <div class="cell cell-4" style="outline: solid 1px red;">a+b+c+d</div>
  <div class="cell">e</div>
</div>
<div class="row">
  <div class="cell cell-2">a+b</div>
  <div class="cell cell-3" style="outline: solid 1px red;">c+d+e</div>
</div>

方案优势 #

1. 自适应能力强：修改--cell-content或--cell-margin即可全局调整布局，适配不同分辨率屏幕。
2. 无需复杂计算：对应合并N个单元格，直接添加cell-N类即可，不用手动计算flex-grow比例。
3. 兼容性良好：CSS变量和calc在现代浏览器中全面支持，无需额外JS逻辑。

如果需要动态合并（比如根据内容自动调整），可以结合JS计算单元格数量，但静态场景下用CSS变量+calc完全足够。

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