将最后一个列表项推到底部

时间:2019-11-14 12:34:11

标签: html css flexbox

我正在使用Vali Admin主题,并且试图将左侧边栏中的最后一个列表项推到底部。

我以前几乎没有使用过flexbox,所以我一点都不熟悉它,但是我将菜单更改为display: flex,然后按照this answer尝试将最后一项推到底部。我正在尝试精确地该问题中的人在之后的事情。

这些是我对主题的修改:

.app-menu {
  @extend .app-menu;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;

  li:last-of-type {
    margin-top: auto;
  }
}

工作fiddle

我认为问题在于菜单使用的高度不够。

我很乐意包含一个工作片段,但出于对我的爱,我不知道如何创建jsfiddle。它不允许本地文件,它将阻止我的要旨。与Codepen相同。

3 个答案:

答案 0 :(得分:2)

.app-sidebar上添加以下内容:

  display: flex; // make sidebar a flexbox
  flex-direction: column; // so it will align column direction

我们做了以上操作,所以我们可以在孩子身上应用与flex相关的样式。

这将使父级或侧边栏成为flexbox,然后在.app-menu上添加以下内容

    flex: 1; // this will take all the remaining space on the sidebar

并删除padding-bottom上的.app-menu,以便最后一项保留在底部而没有填充。

答案 1 :(得分:0)

按照随附的链接中所述进行操作是正确的。 但是您没有为ul设置100%的高度。 将height: 100%;设置为.app-menu类可以解决您的问题。

这是基于您的代码的工作示例:

https://jsfiddle.net/zewx18ps/1/

答案 2 :(得分:0)

尝试

.app-menu {
    margin-bottom: 0;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;

如果最后一项需要显示在页面底部。尝试通过将height:100%设置为ul