如何使用 flex 使一个在右侧对齐，另一个在左侧对齐 - CSS？

Question

我想让两个项目水平对齐，但我不知道如何使用 flex 使它们响应式地分开：

<div class="container">
  <div class="item-left">Left</div>
  <div class="item-right">Right</div>
</div>

.container {
 display: flex
}

目的是无论我如何改变屏幕的宽度，它们仍然是分开的（一个在左边，另一个在右边）。我可以使用grid和justify-self来实现这一点，但是我将如何使用 flex 来获得此预期结果？

谢谢！

Answer 1

通过使用justify-content: space-between：

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

<div class="container">
  <div class="item-left">Left</div>
  <div class="item-right">Right</div>
</div>