如何在列中创建浮动元素?[复制品]

感谢@divy3993的链接: https://w3bits.com/labs/flexbox-masonry/2/ 一旦你意识到创造的术语是“砖石结构”,谷歌就会更容易理解这一点。

父容器( .container 在我的示例中)具有以下样式:

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

砖也应该有点间距( .item 在我的例子中:

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}

这个解决方案相当有限 max-height 值是必需的,因为项基本上是逐列包装的。然而,一个简单的ish修复方法是添加计算项目高度的javascript。可以使用各种方法来实现这一点。