如何在单个flex容器内实现flex item分别左右对齐

方案1：使用margin-left: auto（推荐，兼容性强、灵活度高） #

直接给需要靠右的flex子元素添加margin-left: auto即可，浏览器会自动分配该方向所有剩余空间到这个margin上，把元素推到最右侧，不管左侧有多少个元素都适用。
示例代码：

<!-- 容器结构 -->
<div class="flex-container">
  <div class="item">左侧元素1</div>
  <div class="item">左侧元素2</div>
  <div class="item right-item">需要靠右的元素</div>
</div>

.flex-container {
  display: flex;
  align-items: center; /* 可选，垂直居中对齐子元素 */
}
.right-item {
  margin-left: auto;
}

方案2：使用justify-content: space-between（仅适合容器内只有两组元素的场景） #

如果flex容器内只需要左右各放一组内容，没有其他零散元素，也可以直接给容器设置justify-content: space-between，自动把两组元素分别推到容器两端。
示例代码：

<div class="flex-container">
  <div class="left-group">
    <div>左侧元素1</div>
    <div>左侧元素2</div>
  </div>
  <div class="right-group">右侧内容</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

注意事项 #

• 如果你的flex容器设置了flex-direction: column纵向排列，要实现元素靠下排列，对应把属性改成margin-top: auto即可。
• 两种方案的兼容性都覆盖了所有主流现代浏览器，无需额外做兼容处理。

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