flex瀑布流排序问题

Flex 瀑布流是利用 Flex 布局实现的多列等高布局。实现瀑布流排序需要考虑以下几点：

1. 设置 flex 容器的 flex-wrap 属性为 wrap，即让 flex 容器内的项目自动换行。
2. 将 flex 容器内的项目设置为 flex-basis: auto 和 flex-grow: 1，即让每个项目的宽度自适应，并让每个项目在父容器内占据相同的空间。
3. 设置每个项目的 margin-bottom 属性，以达到瀑布流效果。如设置为不同的值，可以实现不同高度的瀑布流效果。

下面是一个简单的示例代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: auto;
  flex-grow: 1;
  margin-bottom: 20px;
}

以上代码实现了一个简单的两列瀑布流布局。你可以根据需求修改每个项目的宽度和 margin-bottom 属性来实现不同的瀑布流效果。