如何在flexbox与grid中无需JavaScript实现列宽动态平衡

可以直接通过flex布局配合宽度限制实现，不需要JavaScript介入：

核心逻辑 #

父容器固定宽度为600px，利用flex弹性特性+单栏最大宽度限制实现两种布局的自动切换：

1. 两列内容总宽度 ≤ 600px时，按内容本身的宽度比例拉伸分配父容器宽度
2. 两列内容总宽度 > 600px时，单栏最大宽度限制为50%，自动触发等分布局

完整代码 #

.container {
  outline: 1px solid red;
  width: 600px;
  height: 60px;
  display: flex;
}

.child {
  padding: 0 4px;
  outline: 1px solid black;
  display: grid;
  place-content: center;
  white-space: nowrap; /* 可选，保证内容不换行 */
  /* 核心布局代码 */
  flex: 1 1 auto; /* 允许弹性拉伸/收缩，基础宽度匹配内容宽度 */
  max-width: 50%; /* 单栏宽度最大不超过父容器的一半 */
  min-width: fit-content; /* 避免内容被压缩到小于自身宽度 */
}

<!-- 内容差异大：按比例分配 -->
<div class="container">
  <div class="child">
    短内容
  </div>
  <div class="child">
    这是一段很长的测试文本，内容长度远超另一栏
  </div>
</div>

<!-- 内容宽度接近：自动切换为50/50等分 -->
<div class="container">
  <div class="child">
    这是一段中等长度的测试文本
  </div>
  <div class="child">
    这是另一段长度差不多的测试文本
  </div>
</div>

适配调整 #

如果需要调整触发等分的阈值，只需要修改max-width的取值即可，比如希望触发阈值为父容器的45%，直接设置max-width: 45%就可以对应调整布局触发时机。

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