Flexbox 列自底对齐

Question

我正在尝试使用 Flexbox。 http://css-tricks.com/almanac/properties/a/align-content/ 这显示了不错的对齐选项；但我实际上想要一个自上而下的情况。

我希望一个 div 使用 flexbox 粘在父 div 的底部。使用flex-direction: column 和align-content: Space-between 我可以做到这一点，但是中间的 div 会在中心对齐，我希望中间的也能粘在顶部。

[顶部]

[中间]

-

-

-

[底部]

align-self: flex-end 将使它向右浮动，而不是底部。

完整的 flexbox 文档：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 1

将父容器的项目与基线对齐，子项目作为内联块。

Answer 2

我知道这是一篇旧帖子，但同样的问题，Flexbox 的单轴对齐，让我抓狂了一个小时。

自动边距是一个不错的技巧，但我想与 CSS Grid 分享我的解决方案。

important部分是grid-template-rows的定义。 auto 行与内容具有相同的高度，1fr 将剩余空间用于中间行。

这里是关于 CSS Grid 的一个很好的概述： https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  height: 700px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
}

.top {
  height: 30px;
  width: 400px;
  background-color: blue;
}

.middle {
  width: 400px;
  background-color: green;
}

.bottom {
  height: 30px;
  width: 400px;
  background-color: red;
}

<div class="container">

  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
  
</div>

Answer 3

.message-container {
    display: flex;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.message {
    display: table-cell;
}

试试这个。我用它作为信使。

.container {
  height: 400px;
}

.message-container {
    display: flex;
    background: #eee;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.user-message {
    align-self: flex-start;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(154, 247, 200, 0.692);
}

.friend-message {
    align-self: flex-end;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(169, 207, 250, 0.692);
}

<div class='container'>
  <div class='message-container'>
    <div class='user-message'>Hello!</div>
    <div class='friend-message'>Hi.</div>
  </div>
</div>

Answer 4

我找到了自己的解决方案，我将在此处添加它以获取文档价值；

如果你给中间块height: 100%，它将占据中间的所有房间。所以底部块将在实际底部，顶部和中间在顶部。

更新：这不适用于 Chrome...

更新：找到了一种适用于 FF/Chrome 的方法：将 flex-grow 设置为 [middle] 的较大数字（1 就足够了）将使其采用完整的中等大小。更多信息：http://css-tricks.com/almanac/properties/f/flex-grow/

Answer 5

align self 属性依赖于项目相对于交叉轴的对齐方式，而不是主轴。所以这不是要走的路。 不过，您有几个选项可以使用 flexbox 来实现：

1) 在中间项上使用 flex-grow:1。这将使它增长，占用容器中的所有剩余空间，从而将最后一个 div 推到底部。

2) 重构您的布局，以便有一个带有justify-content:space-between 的主 div，这样您的最后一个 div 将被粘在底部：

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

3) 这有点奇怪，但您甚至可以使用 align-self 来做到这一点，但要反转 flex 方向并允许项目换行：

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

我已经使用这个免费的 flexbox 设计器测试了所有这些： http://algid.com/Flex-Designer

Answer 6

考虑到你的网站有一个基本的结构，下面是我在类似情况下使用和应用的一个解决方案，只需要几行代码：

HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}

Answer 7

基本上，答案是给中间元素的最后一个 flex grow 1 代码，如下所示：

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

谢谢，T04435。

Answer 8

我参加聚会有点晚了，但可能与其他试图完成你应该能够做到的事情的人有关：

margin-top: auto

在有问题的元素上，它应该到底部。应该为 firefox、chrome 和 safari 解决问题。