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

Posted 2023-03-05

【中文标题】CSS Flexbox：将最后第n个项目对齐到末尾[重复]

【英文标题】：CSS Flexbox: Align last nth items towards the end [duplicate]

【发布时间】：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

【参考方案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>