html - 调整父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" (添加 wrap 以进行换行)是否会给出结果你期待吗？