如何使用CSS Flex实现两元素左对齐、一元素右对齐？

架构老林

2026-7-7

使用Flex实现两元素左对齐、一元素右对齐的最优方案

你提到的margin-left: auto不仅不是“不优雅的技巧”，反而是Flex布局中实现这种对齐需求的标准且最优的方案。Flex布局的auto边距设计就是用来处理这种灵活的空间分配场景的——它会自动填充元素左侧的所有可用空间，从而把第三个元素推到容器的最右侧，同时前两个元素保持左对齐。

最优实现代码

.flex-container {
  display: flex;
  /* 默认justify-content就是flex-start，无需额外设置 */
}

.item-3 {
  margin-left: auto;
}

对应的HTML结构：

<div class="flex-container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item item-3">元素3</div>
</div>

其他替代方案（不如最优解简洁）

如果不想用auto边距，也可以尝试以下方法，但都会带来额外的复杂度：

嵌套容器+space-between：把前两个元素包裹在一个子Flex容器中，然后给父容器设置justify-content: space-between。这种方法需要增加额外的DOM层级，不够简洁。

.flex-container {
  display: flex;
  justify-content: space-between;
}
.left-group {
  display: flex;
}

<div class="flex-container">
  <div class="left-group">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
  </div>
  <div class="item">元素3</div>
</div>

Grid布局：通过定义网格列来分配空间，比如设置grid-template-columns: auto auto 1fr，让第三个元素占据剩余空间。但这种方式需要明确列的数量，灵活性不如Flex的auto边距。
```
.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr;
}
.item-3 {
  justify-self: end;
}
```