Flexbox布局：无需隐藏元素实现特定子元素对齐需求

当然有完美的解决方案！不用加第三个隐藏div，咱们靠Flexbox本身的特性就能搞定，而且完全支持两个div都不设固定宽度的场景。

核心思路 #

利用Flexbox的**自动外边距（auto margin）**特性，结合justify-content: center，就能让左侧div靠左，同时让另一个div保持在容器的绝对水平中心。具体来说：

• 给容器设置justify-content: center，让内部元素默认居中
• 给左侧的div添加margin-right: auto，这个属性会“吃掉”它和居中div之间的所有可用空间，把自己推到容器最左侧，而居中div则会不受影响地保持在容器正中间

完整代码示例 #

HTML结构（和你给出的完全一致）

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

CSS样式

.container {
  display: flex;
  justify-content: center; /* 让子元素默认居中 */
  gap: 1rem; /* 可选：给两个div之间加一点间距，不加也不影响布局逻辑 */
}

.container > div:first-child {
  margin-right: auto; /* 关键属性：把左侧div拉到最左 */
}

为什么这个方法有效？ #

Flexbox的auto外边距会自动填充元素所在轴上的可用空间。当给左侧div设置margin-right: auto时，它会占据从自身右侧到容器右侧的所有剩余空间（除了居中div的宽度），从而迫使自己紧贴容器左边缘，而居中div则因为没有额外外边距，会在容器的水平中线位置停留——哪怕两个div的内容长度变化，这个布局逻辑都能稳定生效。

额外提示 #

如果你的容器有左右padding，这个方法依然适用，因为auto外边距是基于容器的可用内容空间计算的，不会受padding影响。

内容的提问来源于stack exchange，提问作者Mr. XYZ