如何用Flex属性实现单/双按钮的居中与居右布局（无需margin-left:auto）

可以通过Flex伪元素和flex:1属性实现需求，无需使用margin-left:auto：

.container {
  display: flex;
  width: 100%; /* 确保容器占满可用宽度 */
}

/* 左侧占位伪元素，用于平分剩余空间 */
.container::before {
  content: "";
  flex: 1;
}

.button-right {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* 让按钮自身居右 */
}

<div class="container">
  <button class="button-center">Centered Button</button>
  <button class="button-right">Right Button</button>
</div>

效果说明 #

1. 当button-right存在时：

   • 容器内有三个弹性项：左侧伪元素（flex:1）、button-center、button-right（flex:1）
   • 两个flex:1的项平分容器剩余空间，button-center自然处于容器水平中心位置
   • button-right通过justify-content:flex-end让自身按钮居右显示

2. 当button-right消失时：

   • 容器内仅剩左侧伪元素（flex:1）和button-center
   • 左侧伪元素占据所有剩余空间，将button-center挤到容器右侧

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