如何使用 flex 使一个在右侧对齐，另一个在左侧对齐 - CSS？ [复制]答案

【问题标题】：How to use flex to make one align on the right and another on the left - CSS? [duplicate]如何使用 flex 使一个在右侧对齐，另一个在左侧对齐 - CSS？ [复制]
【发布时间】：2022-01-31 05:19:41
【问题描述】：

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

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

.container {
 display: flex
}

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

谢谢！

【问题讨论】：

只需添加 justify-content: space-between;

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

尝试为您的容器使用justify-content: space-between;。它会在你的元素之间均匀地放置空间。见MDN Web Docs。

一旦屏幕太小以至于两个元素不能彼此相邻，它可能会中断，因此您可能必须至少有一个媒体查询来删除display: flex; 或更改两个元素的宽度。

【讨论】：