如何使用CSS Flex实现两个元素分别左对齐和右对齐？

以下两种方案均可实现无论容器宽度如何变化，两个元素始终保持一个靠左、一个靠右的响应式布局：

方案1：使用容器的justify-content属性（适合仅两个子元素的场景） #

直接给flex容器添加justify-content: space-between即可实现两端对齐效果，你可以额外添加align-items: center保证两个元素垂直方向居中对齐。
代码示例：

.container {
  display: flex;
  justify-content: space-between;
  /* 可选配置：垂直居中对齐两个子元素 */
  align-items: center;
}

该方案逻辑直观，只要容器内仅有这两个子元素，就能自动适配任意宽度的容器。

方案2：使用子元素自动外边距（更灵活，支持后续新增中间元素） #

如果后续可能需要在两个元素中间插入其他内容，或者不想修改容器的全局对齐设置，可以给右侧元素单独添加margin-left: auto。flex布局下自动外边距会占据主轴方向全部剩余可用空间，自然将右侧元素推到最右边缘。
代码示例：

.container {
  display: flex;
  /* 可选配置：垂直居中对齐两个子元素 */
  align-items: center;
}

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

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