砌体布局与css3 flex

Question

我正在尝试使用的物品砌成布局 display: flex;

它运行良好,直到我的项目有不同的大小:

这是一个例子:http://jsfiddle.net/2pL3j07x/1/

我想小以下项目大项目绕到它(以下大项应伊斯利配合的"行" 2项,但只有1去那里)

有可能用css flex这样做吗？

Answer 1

float:left;我认为对于您想要做的事情，使用而不是属性会更容易flex。我做了一个更新

JSF 在这里

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    background: gray;
    margin: 0 10px 10px 0;
}

.big {
    width: 210px;
    height: 210px;
    float:left;
}

.wrap {
    display: inline-block;
}

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i big"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>
</div>