CSS flex 盒 : filling blank space between vertical elements

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 插件很好地放置它们，就像这样:

如您所见，“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;
}

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

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

.