CSS Flexbox：将最后n个项目对齐到末尾

Question

我在“导航”中有一些“ div”：

<nav>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</nav>

我想在顶部对齐div A，B，C，D，但在底部对齐div E和F：

此代码适用于最后一项（F），但E恰好浮动在中间：

nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
  
        & > div:nth-child(5),
        & > div:nth-child(6) {
          margin-top: auto;
        }
}

我该如何使div E底部粘有div F（在导航栏内没有多余的包裹div）？

JSFiddle

Answer 1

您可以通过以下两种方式进行操作。

使用nth-child()

仅在margin-top:auto上使用nth-child(5)以获得所需的结果

实时演示：

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 250px;
  width: 150px;
  border: 1px solid red;
}

div {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
  width: 100%;
}

div:nth-child(5) {
  margin-top: auto;
}

<nav>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</nav>

使用:nth-last-child()

您也可以使用nth-last-child()来实现。

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 250px;
  width: 150px;
  border: 1px solid red;
}

div {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
  width: 100%;
}

div:nth-last-child(2) {
  margin-top: auto;
}

<nav>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</nav>