相关疑难解决方法(0)

使用两列flexbox布局,如何使不同大小的子项填充所有可用空间,而不是所有具有该行最高子级高度的子项？

我在jsbin上设置了一个说明问题的演示.我希望所有的孩子都能达到包装内容的大小.

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

我想通过 flexbox.Child 元素创建砌体布局，应该按以下顺序出现，并且孩子的高度和宽度相同。我正在使用延迟加载。

1 2
3 4
5 6

我试图浮动元素.这是我的css:

width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;

我的生成输出

但我想以这种格式显示我的div

请帮帮我.如何使用CSS防止垂直间隙？