弹性盒水平位置

Question

我有 N 个 div，最多 N = 5，我还有另一个名为 X 的 div

我想在一个 flex div 容器中水平对齐 N 个相邻的 div。 但是无论有多少 N div，X div 都必须始终推到 flex 容器的右侧。

例如

N   N               X
N   N   N           X

我可以用左浮动和一些尺寸来做到这一点，但我对 Flex 迷失了方向。我可以让 X div 位于最后一个 N div 旁边，但不能位于右侧，就好像始终固定在那个位置一样。

Answer 1

margin-left：自动应用于 x

.container {
  display: flex;
  justify-content: flex-start;
}

.n,
.x {
  width: 15%;
}

.x {
  margin-left: auto;
}

<div class="container">
  <div class="n">N</div>
  <div class="n">N</div>
  <div class="n">N</div>
  <div class="x">X</div>
</div>