时间戳

首页 > 解决方案 > Flex Box，对齐最后 2 个项目，位于 flex 框的底部

javascript - Flex Box，对齐最后 2 个项目，位于 flex 框的底部

问题描述

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

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

我的 CSS 样式是：

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'}
`;

当前实现仅在底部对齐最后一个元素

标签： javascriptcssreactjsstyled-components

解决方案

首先，请分类前两个项目是一个 div，接下来的两个项目在另一个 div 之后我们可以简单的 flex-box

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

这可能会做到

推荐阅读