Flexbox实现不同行同序列列等宽 无需设置固定宽度

实现思路说明 #

你要实现的是跨行的列宽同步效果，单独给每行设置flex布局是无法实现的：因为每个.row是独立的flex容器，只会计算自身内部子元素的宽度，不同容器之间没有宽度同步的机制。而flex-grow的作用是分配同一个flex容器内的剩余空间，也解决不了跨容器的宽度统一问题。

推荐使用适配二维布局的CSS Grid实现，完全不需要设置固定宽度，第一列会自动适配最长内容的宽度：

纯CSS实现方案（推荐） #

1. 调整HTML结构，给所有行添加统一父容器

<!-- 新增grid父容器 -->
<div class="grid-wrapper">
  <div class='col a'>YEET</div>
  <div class='col b'>:)</div>
  <div class='col a'>YEET STICK</div>
  <div class='col b'>:)</div>
</div>

2. 添加Grid样式

.grid-wrapper {
  /* 容器宽度由内容自动撑开，不会占满整行 */
  display: inline-grid;
  /* 定义两列，宽度都由内容自适应，第一列自动匹配最长内容的宽度 */
  grid-template-columns: auto auto;
  /* 可根据需要调整列、行间距 */
  column-gap: 4px;
  row-gap: 8px;
}

如果不想修改原有HTML的行结构，也可以用如下写法，效果完全一致：

/* 给所有行的父容器设置grid */
.grid-wrapper {
  display: inline-grid;
  grid-template-columns: auto auto;
}
.row {
  /* 让.row的子元素直接参与父级grid的列排列 */
  display: contents;
}

兼容Flex布局的JS实现方案 #

如果你必须保留原有flex布局结构，可以用JS动态计算第一列的最大宽度后统一设置：

const firstCols = document.querySelectorAll('.a');
// 遍历获取所有第一列的最大宽度
const maxWidth = Math.max(...Array.from(firstCols, el => el.offsetWidth));
// 给所有第一列统一设置宽度
firstCols.forEach(el => el.style.width = `${maxWidth}px`);

该方案需要注意：如果第一列的内容会动态变化，需要在内容更新后重新执行上述代码计算宽度。

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