时间戳

首页 > 解决方案 > 将最后一个列表项推到底部

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

问题描述

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

标签： htmlcssflexbox

解决方案

在 上添加以下内容.app-sidebar：

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

我们做了上面的事情，所以我们可以在孩子身上应用与 flex 相关的样式。

这将使父或侧边栏成为弹性框，然后添加以下内容.app-menu

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

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

推荐阅读