Flexbox space-between布局未知宽度列 中间div无法水平居中求解

问题根因 #

现有代码使用justify-content: space-between无法实现需求的核心原因是：该属性仅保证元素之间的空白间隔相等，当div1、div3宽度不一致（比如div3为空时宽度为0），中间的div2就会偏离水平居中位置。此前找到的解决方案需要固定div2宽度，不符合「div1、div2宽度未知」的约束。

推荐解决方案（CSS Grid实现，满足所有约束） #

该方案无需提前指定任何元素宽度，自动适配所有场景：

• 父容器设置为Grid布局，通过grid-template-columns: 1fr auto 1fr将容器横向划分为三部分：左右两区域等分所有剩余宽度，中间区域宽度随div2内容自适应
• 可通过gap属性统一设置间距，保证所有元素间距均等
• 无论div1、div3内容多少（包括div3为空），div2始终处于父容器水平居中位置

示例代码

/* 父容器样式 */
.wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px; /* 可自定义间距数值 */
}
.wrap > div {
  background: pink;
  border: 1px solid #ccc;
}
/* 可选样式：如果需要div1内容左对齐、div3内容右对齐，加上以下代码即可 */
.d1 {
  justify-self: start;
}
.d3 {
  justify-self: end;
}

<div class="wrap">
  <div class="d1">div1 任意内容</div>
  <div class="d2">div2 始终水平居中</div>
  <div class="d3">div3 可空可填内容</div>
</div>

备选Flex兼容方案 #

如果需要兼容老旧浏览器，可以用Flex布局实现，效果一致：

.wrap {
  display: flex;
  gap: 16px;
}
.d1, .d3 {
  flex: 1;
}
/* 对齐调整 */
.d1 {
  text-align: left;
}
.d3 {
  text-align: right;
}
.wrap > div {
  background: pink;
  border: 1px solid #ccc;
}

内容的提问来源于stack exchange，提问作者Tadas V.