调整父 div 中的多个 div 显示

Question

我有一个包含多个子 div 的 div 父级，但是当它包含这么多子级时，我看不到所有子级，因为它们保持在一行中，没有调整到列中。

这是我的实际 html

项目1 项目2 第 3 项 ...

            <mat-card class="hover tag" fxFlex ngxDraggable>item20</mat-card>

这是我的 scss：

.board{
  background-color:  #f5f5f5;
}

.board-header{
  background-color:  #f5f5f5;
  border-bottom: rgba(0,0,0,.87);

}

.tag{
  transition: box-shadow 280ms cubic-bezier(.4,0,.2,1) !important;
  padding: 10px !important;
  border-radius: 10px !important;
  max-width: fit-content !important;
  margin: 10px !important;
  max-height: fit-content !important;
}

这是我的一种实际结果：

|                                    |
| |item1|  |item2|  |item3|  |item4| |
|                                    |

Here is what I expect:
|                                    |
| |item1|  |item2|  |item3|  |item4| |
| |item5|  |item6|  |item7|  |item20|| 

Answer 1

在您的 div 容器上使用 fxLayout="row wrap" 而不是 fxLayout="row"（添加换行以使行换行）怎么样？这样会产生您期望的结果吗？