如何使用flexbox创建砖石布局

Question

我想通过flexbox创建瀑布流布局。子元素应按以下顺序出现，并且子元素高度不同但宽度相同。我正在使用lazy loading。

1 2
3 4
5 6

- bangash

---

制作HTML和CSS片段。 - Rahul

在搜索“砖石布局CSS网页设计”之后（因为我以前从未听说过“砖石布局”这个术语），我发现了一些事情：砖石布局是昨天我所谓的“Pinterest布局”。感谢你教会我一个新词。有关flexbox砖石布局的先前问题 * https://dev59.com/vV4b5IYBdhLWcg3wzUUp * https://dev59.com/CmEi5IYBdhLWcg3wwemq - mat

例如，您无法确定3是否比4更高，或者如果1比2更高，则4不会正确显示在2的正下方。 - FelipeAls

Answer 1

技术上讲，使用flex-flow: column-wrap是可能的，但您需要知道容器的高度，以便项目可以正确换行，并且您还需要重新排序flex项目，因为默认顺序是垂直的。

@import url('https://fonts.googleapis.com/css?family=Montserrat');
html,
body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

.container {
  height: 500px;
  width: 200px;
  display: flex;
  padding: 2px;
  flex-direction: column;
  flex-wrap: wrap;
}

.cell {
  color: white;
  background: #e91e63;
  height: 150px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  border-radius: 5px;
}

.c2 {
  order: 4;
  height: 100px;
}

.c3 {
  order: 2;
  height: 100px;
}

.c4 {
  order: 5;
  height: 200px;
}

.c5 {
  order: 3;
}

.c6 {
  order: 6;
  height: 100px;
}

<div class="container">
  <div class="cell c1">1</div>
  <div class="cell c2">2</div>
  <div class="cell c3">3</div>
  <div class="cell c4">4</div>
  <div class="cell c5">5</div>
  <div class="cell c6">6</div>
</div>

如果其他人在寻找只使用CSS的瀑布流解决方案，请参考Michael_B的以下答案（目前唯一且最完整的答案）：

• CSS-only瀑布流布局，但元素水平排序

- Kostas Siabanis