Question

我正在使用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相同。

Answer 1

在.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，以便最后一项保留在底部而没有填充。

Answer 2

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

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

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

Answer 3

尝试

.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

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

3 个答案: