当 Flex 容器中必须保留一个空的 DOM 占位符（如 React Portal 所需的 wrapper div），但又希望仅有的可见子元素能自动居中显示时，可通过 :empty 伪类隐藏空容器，从而让 Flex 布局重新计算有效子项位置。
当 flex 容器中必须保留一个空的 dom 占位符（如 react portal 所需的 wrapper div），但又希望仅有的可见子元素能自动居中显示时，可通过 `:empty` 伪类隐藏空容器，从而让 flex 布局重新计算有效子项位置。
在使用 Flexbox 构建响应式按钮栏时，一个常见但棘手的问题是：DOM 结构中必须存在某个容器元素（例如 <div id="portalContainer">），但它可能长期为空——尤其在 React Portal 场景下，该容器是渲染目标，不能被条件性移除。此时，即使它内部没有子节点，Flex 布局仍将其视作一个有效 flex item，导致 justify-content: space-evenly 将剩余可见按钮“挤偏”，无法视觉居中。
解决的关键在于：让空容器在布局中“消失”，而非仅视觉隐藏。display: none 正是实现这一点的标准方式——它不仅隐藏元素，更使其完全退出文档流和 Flex 格式化上下文，Flex 容器将忽略它进行主轴空间分配。
而精准识别“空容器”的最佳 CSS 方案是 :empty 伪类。它匹配不包含任何子节点（包括文本节点、元素节点）的元素，且具有极佳的浏览器兼容性（Chrome 1+, Firefox 1+, Safari 3.1+, Edge 12+），远优于尚未全平台支持的 :has()。
以下是完整、可直接落地的解决方案：
.wrapper {
display: flex;
justify-content: space-evenly;
width: 500px;
background-color: #eee;
padding: 12px 0;
}
button {
height: 75px;
min-width: 120px;
border: none;
border-radius: 6px;
background-color: #4a6fa5;
color: white;
font-weight: 600;
cursor: pointer;
}
/* 关键修复：当 portalContainer 为空时，彻底移出布局流 */
#portalContainer:empty {
display: none;
}HTML 结构保持不变（满足 Portal 约束）：
<div class="wrapper"> <div id="portalContainer"></div> <!-- 可能为空，但必须存在 --> <button>Button 2</button> </div>
✅ 效果验证：
- 当 <div id="portalContainer"> 内无内容时 → :empty 生效 → display: none → Flex 容器仅剩 1 个子项 → space-evenly 等效于居中对齐；
- 当 <div id="portalContainer"><button>Button 1</button></div> 时 → :empty 不匹配 → 容器正常参与布局 → 两个按钮按 space-evenly 均匀分布。
⚠️ 注意事项：
- :empty 严格匹配“无子节点”，若容器内含空白字符（如换行、空格），将不被视为 empty。确保服务端/JS 渲染时避免注入空白文本节点；
- 若需兼容极老浏览器（如 IE8 及以下），可配合 JavaScript 动态添加 .is-empty 类并用 :not(.is-empty) 控制，但现代项目中 :empty 已足够可靠；
- 切勿使用 visibility: hidden 或 opacity: 0 替代 —— 它们保留元素在布局中的占位，无法解决 Flex 分布问题。
此方案零 JS 依赖、语义清晰、兼容性强，是兼顾架构约束与 UI 精确性的理想 CSS 实践。
