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

【问题标题】：CSS Flexbox: filling blank space between vertical elementsCSS Flexbox：填充垂直元素之间的空白
【发布时间】：2014-06-27 21:55:00
【问题描述】：

我对 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 插件很好地结合在一起，就像这样：

如您所见，“5555”项目就在“Nexus 5”之后，“44444”和“Nexus 7”也是如此。

问题是，我怎样才能用 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;
}

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

【问题讨论】：

标签： css flexbox

【解决方案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 */
}

【讨论】：

谢谢@abhitalks！仅在 -webkit 浏览器中支持吗？我应该使用它而不是 Flexbox 吗？
@ReuvenKarasik：对于其他浏览器，只需添加供应商前缀，如“-moz”等。确保标准的位于最后。 AFAIK，flex 不能解决你的问题。
投反对票 - 2 年后投反对票的任何特殊原因？！？！评论将不胜感激。