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

Question

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

我之前几乎没有使用过 flexbox 所以我一点也不熟悉，但是我将菜单更改为display: flex然后按照这个答案尝试将最后一项推到底部。 如果之后，我正在尝试做那个问题中的人。

这些是我对主题的修改：

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

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

工作小提琴。

我认为问题在于菜单没有使用尽可能多的高度。

我很乐意包含一个工作片段，但为了我的爱，我无法弄清楚如何创建一个 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

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

Answer 2

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

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

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