Javascript Flex Box，将Flex Box底部的最后两个项目对齐

我在屏幕的左侧有一个垂直导航栏，里面有一些导航项目。看看下面的例子。我想在菜单中对齐顶部的两个项目，底部的两个项目。这是我的导航：

<List>
  <Item>
    <Icon />
    <span class="sc-AxiKw hDoHET">Templates</span>
  </Item>
  <Item>
    <Icon />
    <span class="sc-AxiKw hDoHET">My Projects</span>
  </Item>
 
  <hr class="MuiDivider-root">
  <Item>
    <Icon />
    <span class="sc-AxiKw hDoHET">Profile</span>
  </Item>
  <Item>
    <Icon />
    <span class="sc-AxiKw hDoHET">Logout</span>
  </Item>
</List>

---

当前实现仅在底部对齐最后一个元素首先，请将前两项分类为一个div，然后将下两项分类为另一个div，然后我们可以使用简单的flex box

  export const List = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
;

---

这可能会做到这一点

这是一个React组件，使用样式化组件，这可能会有所帮助，但问题是映射自和数组的项组件：

['Templates'、'myprojects'、'Profile'、'Log Out'].map（element=>（{element}））

您是如何将

放置在上面讨论的那些标记之间的？我在数组中有一个标志：

{name:My Porjects，hasBottomDivider:true}

  export const List = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
;