CSS Flexbox：填充垂直元素之间的空白区域

Question

我的flexbox有问题： 我有HTML：

<div class="panel-body">
   <div class="project">

   </div>

   <div class="project">

   </div>
   <div class="project">

   </div>
   <div class="project">

   </div>
   <div class="project">

   </div>
 </div>

你可能会有这个想法......

现在，我希望它看起来像这样：

|项目| |专题| |项目|

|项目| |专题| |项目|

|项目| |专题| |项目|

等。

但是，有些项目比其他项目更高。所以大约一年前，我设法将它们与isotope.js插件很好地配合使用，如下所示：

如您所见，项目＆＃34; 5555＆＃34;就在＆＃34; Nexus 5＆＃34;之后，同样关于＆＃34; 44444＆＃34;和＆＃34; Nexus 7＆＃34;。

问题是，我怎么能用flexbox做到这一点？这可能吗？

我目前的CSS代码：

.panel-body{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}

.panel-body .project {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 300px;
   margin: 1px 10px;
}

这就是它现在的样子（箭头告诉你我希望它看起来如何）

Answer 1

你还不能用flex-box做到这一点。但是，CSS3 columns可能会为您提供接近您所追求的东西。

演示：http://jsfiddle.net/abhitalks/nHbdL/

HTML标记：

与你的问题相同。

CSS ：

div.panel-body { 
    height: 600px;        /* fixed height allows you to control column fill */
    -webkit-columns: 3;   /* number of columns that you want */
    column-count: 3;      /* the standard property after all prefixed ones */
}

div.project {
    background-color: #cfffbd;
    -webkit-column-break-inside: avoid; /* will prevent breaking blocks across columns */
    column-break-inside: avoid;         /* the standard property after all prefixed ones */
}