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

Question

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

由于某些原因，我的flexbox代码并没有将flexbox项目并排跳转到另一个事件，当确切的空间可用时。

我想要实现的目标的插图

在jsfiddle上

演示 https://jsfiddle.net/31v7et9f/1/

HTML

<div class="masonry">
    <div class="item-1-4">item 25%</div>
    <div class="item-1-1">item 100%</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>

CSS

* {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%;}

Answer 1

默认情况下，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中做一些数学计算，以确定他们应该在哪个顺序进行平铺）。

<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;
}

https://jsfiddle.net/31v7et9f/2/