CSS如何实现flex-box内两个不等宽按钮的间隙正对容器水平中线

这个需求可以实现，Flex布局和其他布局方案都能满足要求，原有justify-content: center实现不了的原因是，它会将两个按钮作为一个整体计算总宽度后居中，两个按钮宽度不一致时，自然无法让间隙对齐容器中线。

方案1：纯Flex布局实现 #

不需要额外的JS或复杂定位，仅用Flex属性就能实现：

1. 给两个按钮分别套一层等宽的Flex子容器，两个子容器的分界自然就是容器的水平中线
2. 第一个子容器内的按钮右对齐，第二个子容器内的按钮左对齐，间隙就能刚好落在中线上

代码示例：

<!-- 外层容器 -->
<div class="btn-box">
  <div class="btn-wrap">
    <button class="btn short">取消</button>
  </div>
  <div class="btn-wrap">
    <button class="btn long">确认并提交表单</button>
  </div>
</div>

.btn-box {
  display: flex;
  width: 600px; /* 按你的需求设置容器宽度 */
}
.btn-wrap {
  flex: 1; /* 两个子容器各占50%宽度 */
  display: flex;
}
/* 第一个子容器右对齐，第二个左对齐，设置间隙 */
.btn-wrap:first-child {
  justify-content: flex-end;
  padding-right: 8px; /* 总间隙的一半，可自定义 */
}
.btn-wrap:last-child {
  justify-content: flex-start;
  padding-left: 8px;
}

方案2：Grid布局实现（代码更简洁） #

如果不限制只能使用Flex，Grid布局的实现代码更短，不需要额外嵌套子容器：

<div class="btn-box">
  <button class="btn short">取消</button>
  <button class="btn long">确认并提交表单</button>
</div>

.btn-box {
  display: grid;
  width: 600px;
  grid-template-columns: 1fr 1fr; /* 直接将容器分为两等份，分界就是中线 */
  gap: 16px; /* 直接设置两个按钮的总间隙，可自定义 */
}
/* 按钮对齐规则 */
.btn-box button:first-child {
  justify-self: end;
}
.btn-box button:last-child {
  justify-self: start;
}

两种方案都支持按钮宽度动态变化，不管按钮内容怎么变，间隙都会始终对齐容器中线，适配移动端堆叠布局也只需要加简单的媒体查询即可。

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