Question

我正在尝试使用flex / flexbox以砖石风格创建显示div。它必须最多为2列。每个div具有相同的宽度（因此它将均匀地分成2列），但高度根据div的内容而变化。因此，某些高度会比其他高度小。

蓝色框是我的div（孩子），每个框都有内容。您可以注意到它们具有相同的宽度，有些具有比其他宽度更小的高度。

问题：左栏上的顶部和底部儿童之间存在大的差距。底部的孩子应该向上移动到顶部孩子的底部。我怎么能这样做？

编辑：

以下是正在使用的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;
}

然后您需要将此样式应用于每个孩子：

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

本教程还提供了指向旧版浏览器JS fallback的链接

这就是创建砌体式布局所需的全部内容：）

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

1 个答案: