柔性箱水平位置

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

＆＃13;

＆＃13;

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

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

.x {
  margin-left: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;