代码之家 › 专栏 › 技术社区 › dabadaba

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

flexbox css html

dabadaba · 技术社区 · 5 年前

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相同。

0 回复 | 直到 5 年前

I am L 5 年前

添加以下内容 .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 在 .应用程序菜单 所以最后一个项目将留在底部没有填充。

vas 5 年前

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

如果最后一项需要显示在页面底部。通过设置尝试height:100% 致联邦制药

Vadym Semenets 5 年前

但是你没有为你的孩子设定100%的身高 ul . height: 100%; .app-menu 课堂解决了你的问题。

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

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

3 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

3 年前

alan · 有没有办法向flexbox图像添加链接?

3 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前