程序员经验分享-hwhale

使用 Flexbox 将元素与底部对齐

2024-03-29

我正在尝试使用 Flexbox 将 DIV 与底部对齐align-content: flex-end（并尝试align-self: flex-end）没有运气。

我在这里做错了什么？我想align-content对齐......好吧......内容到任何允许的高度/宽度。

html, body {
  height: 100%;
}

div.slots {
  background: white;
  display: flex;
  flex-direction: column;
  width: 250px;
  align-content: flex-end;
}
div.slots div.top_slots {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}
div.slots div.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #676767;
  height: 35px;
}
div.slots div.slot svg {
  fill: #272727;
}
div.slots div.slot:hover {
  background-color: #8d8d8d;
}
div.slots div.pane {
  background: grey;
  height: 100px;
  width: auto;
  text-align: center;
}
<div class="slots">
  <div class="top_slots">
    <div class="slot stats">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>
    </div>
    <div class="inventory slot">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>
    </div>
    <div class="wear slot">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
    </div>
  </div>

  <div class="pane">
    Stuff goes here
  </div>

  <div class="bottom_slots">
    <div class="slot friends_list">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
    </div>
    <div class="slot settings">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
    </div>
    <div class="slot logout">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>
    </div>
    <div class="slot quests">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>
    </div>
  </div>
</div>

现在，.slots是一个包含弹性项目的弹性容器。使用 Flexbox 将其与底部对齐的一种方法是将其放入另一个 Flexbox 容器中。这可以通过提出以下问题来形象化：“将其对齐到什么的底部？”答案是：“到另一个弹性容器的底部”。

所以，除了灵活之外容器, .slots也可以是弹性的item在另一个弹性容器内。然后就可以对齐了.slots与底部its容器。

下面，我设置了它的容器<body>成为一个灵活的容器.slots元素。这类似于方法之一“粘性页脚”，详细信息参见 CSS-Tricks https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3.

html,
body {
  height: 100%;
  margin: 0;
}


/* ADDED THIS */
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

div.slots {
  background: white;
  display: flex;
  flex-direction: column;
  width: 250px;
  /* align-content: flex-end; - NOT NEEDED */
}

div.slots div.top_slots {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

div.slots div.bottom_slots {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

div.slots div.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #676767;
  height: 35px;
}

div.slots div.slot svg {
  fill: #272727;
}

div.slots div.slot:hover {
  background-color: #8d8d8d;
}

div.slots div.pane {
  background: grey;
  height: 100px;
  width: auto;
  text-align: center;
}
<div class="slots">
  <div class="top_slots">
    <div class="slot stats">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>
    </div>
    <div class="inventory slot">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>
    </div>
    <div class="wear slot">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
    </div>
  </div>

  <div class="pane">
    Stuff goes here
  </div>

  <div class="bottom_slots">
    <div class="slot friends_list">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
    </div>
    <div class="slot settings">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
    </div>
    <div class="slot logout">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>
    </div>
    <div class="slot quests">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>
    </div>
  </div>
</div>

Michael_B 的场景 #2 https://stackoverflow.com/questions/48218246/aligning-element-to-bottom-with-flexbox#answer-48218380可能是一个更有效的解决方案（更少的容器）。它将所有弹性项目放置在底部.slots，它通过以下方式扩展了页面的整个高度height:100vh.

我想说这个决定部分取决于页面上存在的其他内容。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

使用 Flexbox 将元素与底部对齐 的相关文章

随机推荐

  • 如何在C++中提取数字的数字？

    基本上我想做一个小程序 当你输入一个数字 比如145 时 它会读取3位数字并打印最大的一位 int a b c 最大值 cout lt lt Enter a b and c cin gt gt a gt gt b gt gt c max a

  • 如何使 python 进程以正确的进程名称运行？

    我在 Python 中有一些长期进程和临时进程 虽然 shell 和 C 程序以自己的名称运行 但所有 Python 进程都以 python filename py 运行 这使得识别进程变得困难 如何使 python 进程在 Linux 中

  • Angular：将curl 转换为Angular $http POST 请求

    我有这条卷曲线 curl X POST H content type application json H AUTH TOKEN vLC4grMuKbtbamJL3L6x localhost 8080 v1 segments appkey

  • 使用 NHibernate 查询

    我是 NHibernate 的新手 我正在尝试学习如何查询我的数据 下面是配置 xml 仅显示食谱 我希望能够通过输入的关键字按菜谱标题查询菜谱 还有成分名称中的成分 例如 您可以输入 意大利面酒 这是我尝试过的 但给了我一个错误 hql

  • 如何使用 c 中最少的库跟踪鼠标输入

    我不知道在哪里可以找到这些信息 但我想知道如何使用 c 中最少的非标准库来获取鼠标输入 或任何隐藏输入 基本上 c 中是否有相当于鼠标 和其他输入 输入的 stdio 或者是否有一个最小且在多个平台上交叉兼容的库 只需能够将鼠标坐标打印到终

  • 将对象添加到 NSMutableArray 属性

    这是我的数据结构 group 1 n id name elements 1 n 我为具有所有属性的元素定义一个类 为组定义一个类 如下所示 interface Group NSObject NSInteger groupID NSStrin

  • 如何通过模拟选择器和/或 redux 存储来编写 Redux Saga 测试

    Context 我是编写 Redux Saga 测试的新手 并且一直在使用反应样板 https github com react boilerplate开发一个应用程序 该应用程序使用 Jest 进行测试 样板文件非常模块化且复杂 我什至不

  • 如何学习编写惯用的 C++ 代码 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我最近强迫自己学习 C 并且刚刚读完 Herbert Schildt 所著的 C 完整参考 一书 我喜

  • 在 Rails 中创建博客档案

    控制器 class PostsController lt ApplicationController def index posts Post published respond to do format format html index

  • 您所知道的最难理解的 C++ 代码是什么？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • C++ 标准库函数的函数重载

    我有一个免费的功能作为课程的一部分 在类的构造函数中我正在做一些malloc运营 所以在destructor我正在尝试释放那段记忆 但是 VS10 编译器抱怨说 free pointer 与我的类的自由函数的签名不匹配 所以问题是在一个类中

  • Asp.net 中的异步 Web 服务

    如何在 ASP NET 中设置异步 Web 服务 我想调用网络服务将一些数据发布到数据库 但我不关心响应是失败还是成功 我只能使用 net 2 0或3 5 它可以是vb或c 当您在 Visual Studio 中创建服务引用时 单击 高级

  • 哪些类型可以声明为 const？

    在 C 中 哪些类型可以声明为const const int i 0 const double d 0 const decimal m 0 const referenceType null 有完整的清单可供我参考吗 Well MSDN ht

  • 子目录中的 Ember 组件

    我读到现在支持在 components 中包含目录 文件夹 使用 ember cli 我可以生成所需的必要子目录 组件 但是 我似乎无法引用该组件 例如 如果我有这样的文件夹结构 app components sub test comp j

  • 访问 Angular ui-calendar 中的 fullcalendar 对象

    我正在尝试访问 ui calendar 中的 fullcalendar 对象 文档说我需要做的就是给日历属性一个名称 div 然后 您应该能够像这样访问日历 uiCalendarConfig calendars myCalendar 这对我

  • 在 Mac os x Snow Leopard 上编译 Bochs

    有人能够在 Snow Leopard 下编译 Bochs 模拟器吗 Leopard 对我来说工作得很好 但在 Snow Leopard 下我遇到了很多与 Carbon 库相关的问题 好的 我们要求提供更多信息 我在 shell 上使用 ma

  • INSERT INTO 语句中的情况

    我正在尝试设置ActionReq当未提供 ActionReq 时 将此存储过程的列设置为 Expiration AdvancedCancel 的值 ActionReq和 Expiration 是日期时间 AdvancedCancel 是 i

  • 线程不更新进度条控件 - C#

    我有一个带有自定义进度条的自定义表单 在主类 主线程 中生成 然后我生成一个线程并向其发送 ThreadStart 函数 此线程启动函数应该更新自定义控件中的进度条 但没有 class MyClass Custom form with pr

  • 尝试思考如何在 Angular 2 中构建多步表单

    我正在尝试构建一个小型的三步表单 它会类似于这样 我在 React 中执行此操作的方法是使用 redux 来跟踪表单完成情况并根据步骤号 0 1 2 渲染表单主体标记 在 Angular 2 中 什么是做到这一点的好方法 这就是我目前正在尝

  • 使用 Flexbox 将元素与底部对齐

    我正在尝试使用 Flexbox 将 DIV 与底部对齐align content flex end 并尝试align self flex end 没有运气 我在这里做错了什么 我想align content对齐 好吧 内容到任何允许的高度

热门标签