更改CSS列的方向流

Question

所以我有这样的CSS:

#blogPosts{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

这样可以完美地创建3列但是当我获得另一行时,顺序似乎是垂直的,如:

1,3,5
2,4,6

而不是我想要的:

1,2,3
4,5,6

---

重要!

我需要的另一个重要属性是,每个帖子之间必须有一个固定的边距.因此,例如,如果您查看上面的表格,如果2长度超过1,则顶部4将从y下方开始,而不是:height of 2+ y.

---

HTML是这样的:

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

我该怎么做才能解决这个问题？

---

我很高兴任何解决方案,甚至包括javascript/jquery

---

这是我追求的事情

Answer 1

一种方法是使用 flexbox

#blogPosts {
   display: flex;
   align-items: left;
   justify-content: left;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   align-content: flex-end;
}

http://jsfiddle.net/o59gc4hw/2/