如何在灵活的框布局列中将项目对齐到最底部？

Question

到目前为止，我有三个列放在一个垂直框中（不能发布图像，所以这里是一个链接）： http://imgur.com/4Y34c

<div id="vbox">
<div id="blck1"></div>
<div id="blck2"></div>
<div id="blck3"><div id="yellow"></div><div id="blue"></div></div>
</div>

CSS

 #vbox{
 display: box;
 box-orient: vertical;
 }
 #vbox > div {
 box-flex: 1;
 }

问题是我不知道如何让蓝框与第三列的底部对齐。我尝试了所有的对齐属性，我一定是做错了。 任何想法???

Answer 1

首先，您应该使用新的CSS Flexible Box Module语法（现在称为“Flex”而不是“Box”）。请参阅此处的规范：http://www.w3.org/TR/css3-flexbox/

以下是您尝试完成的示例（在Chrome / Safari中）：http://jsfiddle.net/PU2AV/

在我设置的第三个<div>上：

-webkit-justify-content: space-between;

这会在两个元素之间创建空间（如果添加更多元素，则会在所有元素之间平均分配空间）。

或者，你可以在#yellow和#blue之间添加第三个<div>并给它：

-webkit-flex: 1 1 auto;

这会导致它在#yellow和#blue（具有静态高度）之间“弯曲”，将#blue一路推下来。如果你把它留给透明背景，它会产生同样的效果。有时您可能会发现将灵活空间作为实际元素很有用。