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

我对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>

这就是它现在的样子（箭头告诉你我想要它的样子）

---

您还不能用

flex box

实现这一点。但是，CSS3

列

可能会为您提供一些接近您所追求的东西

演示：

HTML标记：

和你的问题一样

CSS:

---

.

谢谢@abhitalks！这是否仅在webkit浏览器中受支持？我应该使用它而不是Flexbox吗？@ReuvenKarasik：对于其他浏览器，只需添加供应商前缀，如“-moz”等。确保标准前缀排在最后。好了，flex不会解决你的问题。Downvoter-有什么特别的原因让你在两年后否决这个吗？！？！请发表评论。

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

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 */
}