Flexbox列自对齐到底部

Question

我试图使用Flexbox.http://css-tricks.com/almanac/properties/a/align-content/这显示了很好的对齐选项; 但我真的想要一个自上而下的情况.

我希望使用flexbox将div粘贴到父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

我参加派对有点晚了,但是对于其他人来说可能是有意义的,你应该能够做到:

margin-top: auto

在有问题的元素上它应该到底.应该为firefox,chrome和safari做诀窍.

Answer 2

基本上,答案是给最后一个中间元素一个flex增长1代码,如下所示:

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

谢谢,T04435.

Answer 3

我找到了自己的解决方案,我会在这里添加它以获取文档值;

如果你给中间区块height: 100%它将占据中间的房间.所以底部块将位于实际底部,顶部和中间位于顶部.

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

更新:找到一种适用于FF/Chrome的方法:设置flex-grow更高的数字(1就足够了)[中]将使其占据中等大小.更多信息:http://css-tricks.com/almanac/properties/f/flex-grow/

Answer 4

align self属性依赖于项目相对于横轴的对齐，而不是主轴。所以这不是要走的路。不过，您有多种选择可以使用 flexbox 实现这一目标：

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

2) 重构您的布局，以便有一个主 div，justify-content:space-between以便您的最后一个 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