如何让Flexbox容器保留空容器时实现单按钮居中

问题描述 #

我有一个最多可容纳3个按钮的Flex容器，采用justify-content: space-evenly实现按钮均匀分布。其中一个按钮被作为React Portal目标的portalContainer div包裹，该div必须始终存在，即使内部无按钮。当portalContainer为空时，剩余的Button2会因Flexbox的space-evenly规则偏移到一侧，现需实现Button2居中显示，且不能使用Firefox不支持的:has()选择器，也不能移除portalContainer。

初始布局代码 #

.wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

<div class="wrapper">
  <div id="portalContainer">
    <button>Button 1</button>
  </div>
  <button>Button 2</button>
</div>

问题场景（空容器时） #

.wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

<div class="wrapper">
  <div id="portalContainer"></div>
  <button>Button 2</button>
</div>

解决方案 #

利用CSS的:empty伪类（Firefox完全支持），对空的portalContainer进行样式重置，让它不再占据Flex布局中的空间：

.wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  background-color: grey;
}

button {
  height: 75px;
}

/* 当portalContainer为空时，重置其尺寸，不占据布局空间 */
#portalContainer:empty {
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

原理说明 #

• 当portalContainer有内容时，:empty伪类不生效，它会正常作为Flex项占据空间，配合justify-content: space-evenly实现按钮均匀分布。
• 当portalContainer为空时，:empty伪类触发，将其宽度设为0，Flex容器内只剩Button2一个有效Flex项，justify-content: space-evenly会自动将其居中显示。
• 此方案无需依赖React状态或:has()选择器，完全符合需求。

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