html - 如何使用 flex 以砌体样式正确显示我的 div？

Question

我正在尝试使用 flex/flexbox 创建砖石风格的显示 div。它最多必须有 2 列。每个 div 具有相同的宽度(因此它会均匀地分成 2 列)，但高度取决于 div 的内容。所以有些高度会比其他高度小。

直奔问题:
http://i.imgur.com/6wsS8nV.png

蓝色框是我的 div(子)，每个 div 都有内容。您会注意到它们的宽度相同，但有些高度比其他的小。

问题:左列顶部和底部子项之间存在较大间隙。底部的 child 应该向上移动到顶部的 child 的底部。我该怎么做？

编辑:

这是正在使用的 CSS:

#main {
   width: 100%;
   height: auto;
   display: -webkit-flex; /* Safari */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.divBob {
   -webkit-flex: 1;  /* Safari 6.1+ */
   -ms-flex: 1;  /* IE 10 */    
   flex: 0 1 auto;
   padding: 5px;
   border: 1px solid #CCE0FF;
   margin: 5px;
   width: 45%;
   height: 100%;
   background-color: #F0F3FA;//#F9FBFF;
}

.divBob:nth-child(2n+1) {
   clear: right;   
}

Answer 1

有什么理由必须使用 flexbox 吗？

如果您不介意使用替代方法 this tutorial将向您展示如何创建砖石风格的布局。 Here's what you'll end up with .

演示标记如下:

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

我们利用应用于父元素的 CSS 属性 column-count 和 column-gap 来确定布局中的列数:

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

然后您需要将此样式应用于每个 child :

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

本教程还提供了一个链接 JS fallback对于旧浏览器

这就是创建 Masonry 风格布局所需的全部 :)