如何实现Div内元素左右分布，左元素扩展时右元素自动居中？

可以通过给右侧元素嵌套一层容器，结合Flex的自动外边距与内部居中属性，完美实现两种场景的对齐需求：

HTML结构 #

<div class="container">
  <div class="left-item">左侧内容</div>
  <div class="right-wrapper">
    <div class="right-item">右侧内容</div>
  </div>
</div>

CSS样式 #

.container {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}

.left-item {
  /* 模拟左侧内容宽度变化，可替换为实际业务内容 */
  min-width: 100px;
  max-width: 90%;
  background-color: #eee;
  padding: 4px;
}

.right-wrapper {
  margin-left: auto;
  display: flex;
  justify-content: center;
  /* 固定右侧容器最小宽度，防止被过度挤压 */
  min-width: 80px;
  flex-shrink: 0;
}

.right-item {
  background-color: #ddd;
  padding: 4px;
}

原理说明 #

• 外层容器使用display: flex搭建基础布局框架，align-items: center保证子元素垂直居中。
• 右侧元素的外层容器right-wrapper通过margin-left: auto，在空间充足时自动被推至容器最右侧，实现左右元素分离对齐。
• 当左侧元素宽度扩展至占满大部分容器空间时，right-wrapper的可用空间被压缩，内部的justify-content: center会让右侧元素在剩余空间内居中显示。
• 设置min-width和flex-shrink: 0是为了避免右侧容器被过度挤压，确保右侧元素有基础的显示空间。

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