CSS3中的砌体布局？

这是一个新的答案,并希望它解决你的问题,跟随两个小提琴,来处理这个问题,第一个脚本将抛出所有奇怪的孩子在左侧,所有甚至孩子在右侧

side1=0,side2=0

$(".flexbox").children().each(function(index, element) {
    if (index % 2 === 0) //odd children (starts with 0 )
    {
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
    }
else //even children
    {
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
    }   
});

http://jsfiddle.net/prollygeek/QD9kZ/

而这第二个小提琴,将根据元素高度平衡双方,使列高度始终没有大的偏差,使用它们的任何脚本都取决于你.

side1=0,side2=0
$(".flexbox").children().each(function(index, element) {
if(side1<=side2)
{
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
}
else if(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
}

});

http://jsfiddle.net/prollygeek/hP6fS/

Flexbox不能用于重新创建Masonry布局.期.

Flexbox用于控制元素沿水平行(flex-direction: row默认情况下)或垂直列(flex-direction: column)的流动方式.这意味着您只能在一个方向上消除多余空间:左/右(行)或上/下(列).因为flex-direction: column需要一个明确的高度来启用包装,所以它完全不适合这个目的.

在CSS多列布局模块是你可以使用纯CSS再造一个砌体布局最接近的,但它仍然只允许你消除的元素之间的多余空间在一个方向:垂直.这个和Flexbox之间的关键区别(使用列方向)是多列模块不需要明确的高度,并且会尽可能地在每个列之间平均分配内容(这可以通过列控制 - 填写属性).列之间的间隙由列间隙属性控制.

http://codepen.io/cimmanon/pen/CcGlE

.my-element {
  -moz-columns: 15em;
  -webkit-columns: 15em;
  columns: 15em;
}