如何使用 flexbox 进行砌体布局

Question

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

1 2
3 4
5 6

Answer 1

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

@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 砖石布局，但元素水平排序