html - 将元素对齐到中心但保持 space-between 属性

Question

我需要知道如何将元素居中放置，同时仍然保持 justify-content: space-between 属性？

大致是这样的:

红色元素需要与 justify-content: space-between 对齐，这样它们才能“触及”黑线。如果一行中只有一个元素，它将居中对齐。

Answer 1

您可以使用 flex-basis: calc(50% - x) 其中 x 是同一行中每两个元素之间距离的一半，然后使用 margin:auto 在最后一个元素上，如果它是该行中的唯一元素(即如果它是最后一个元素并且具有奇数顺序)。我正在使用 20px auto 0px auto，这样我就不会覆盖我在之前规则中设置的上边距。

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

.flex div {
  flex-basis: calc(50% - 50px);
  height: 100px;
  margin-top: 50px;
  background: #D85E5E;
}

.flex div:last-child:nth-child(odd) {
  margin: 50px auto 0px auto;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>