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

我的flexbox有问题：

我有HTML：

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

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

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

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

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

等。

但是，有些项目比其他项目更高。所以大约一年前，我设法将它们与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;

}

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