Flex Box, align last 2 items, at the bottom of flex box

Question

I have a vertical navBar on the left side of the screen, filled with some navigation items. Look a the example bellow. I want to align within the menu 2 items at the top, 2 items at the bottom. Here is my navigation:

<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>

My CSS styles are:

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

export const Item = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  ${({ bottom }) => bottom && 'margin-top: auto'}
`;

The current implementation aligns at the bottom only the last element

Answer 1

First of all, Please categories First two item is a div and next two item in another div after that we could simple flex-box

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

This might do it