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

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 一直向下推。如果您将其保留为透明背景，它将具有相同的效果。有时您可能会发现将灵活空间作为实际元素很有用。