Css 如何使具有自定义宽度的flexbox项目跳转到可用空间

我正在尝试实现Pinterest式的布局，但使用不同百分比宽度的项目。预期的行为与Javascript插件非常相似

由于某种原因，我的flexbox代码不会在确切空间可用时将flexbox项目并排跳转到另一个事件

说明我正在努力实现的目标

在JSFIDLE上演示

html

---

默认情况下，Flexbox项目按照它们在html中的显示顺序进行布局。因此，使用html和

flex-flow:row-wrap您将同时获得2个50%的s，但不包括75%和25%

/* parent */
 .masonry {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

您可以重新排列html（使用javascript进行一些计算，以确定它们在平铺中的顺序）

您可以有多行灵活的元素。当行已满时，项目将拆分为新行或收缩。您可以使用垂直填充的列，直到到达flex父级的末尾。基本上像一排，只是垂直的。以下是你的行动例子：似乎有缺陷。接近Mansorny的一种方法是决定让flexbox处理元素的大小，如下所示：但没有完美的方法。您也可以在CSS列中进行调查。谢谢。这是一个有趣的解决方案，但它有一个缺点，父高度必须由用户预定义，因此失去了它的流体高度。无论如何，这是一个不错的方法。CSS列也很有趣，但它们不允许这样的事情：itemwidth:200%；）你是对的，没有好办法解决这个问题。我猜你是在努力寻找某种东西，那就是尽可能地填满整行。至少，您可以为具有一定响应性的全高解决方案提供
高度：100vh
。你必须决定什么更适合你。
* {box-sizing: border-box;}

/* parent */
.masonry {
    display: flex;
    flex-flow: column;
}

/* childs */
.masonry > div {
    background: gray;
    outline: solid 1px black;
    height: 100px;
}

/* child sizes */
.item-1-1 {width: 100%;}
.item-3-4 {width: 75%;}
.item-1-2 {width: 50%;}
.item-1-4 {width: 25%;}

/* parent */
 .masonry {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

<div class="masonry">
    <div class="item-1-1">item 100%</div>
    <div class="item-1-4">item 25%</div>
    <div class="item-3-4">item 75%</div>
    <div class="item-1-2">item 50%</div>
    <div class="item-1-2">item 50%</div>
    <div class="item-1-1">item 100%</div> 
</div>

/* child sizes */
 .item-1-1 {
    width: 100%;
    -webkit-order: 1;
    order: 1;
}
.item-3-4 {
    width: 75%;
    -webkit-order: 2;
    order: 2;
}
.item-1-2 {
    width: 50%;
    -webkit-order: 3;
    order:3;
}
.item-1-4 {
    width: 25%;
    -webkit-order: 2;
    order:2;
}