CSS Flexbox：将最后第n个项目对齐到末尾[重复]答案

【问题标题】：CSS Flexbox: Align last nth items towards the end [duplicate]CSS Flexbox：将最后第n个项目对齐到末尾[重复]
【发布时间】：2020-12-13 16:32:41
【问题描述】：

我在“nav”中有几个“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

【问题讨论】：

标签： css flexbox

【解决方案1】：

您可以通过以下两种方式做到这一点。

使用nth-child()

在nth-child(5) 上使用margin-top:auto 只是为了获得您想要的结果

现场演示：

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>

【讨论】：