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/

原文由 Laurens Kling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

谢谢，T04435。

原文由 T04435 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 margin-top: auto

在有问题的元素上，它应该到底部。应该适用于 firefox、chrome 和 safari。

原文由 Torbjørn Angeltveit 发布，翻译遵循 CC BY-SA 3.0 许可协议