如何在angular flex布局中换行，使元件显示在新行中

我有一个这样的布局：

<div fxLayout="row" fxFill fxLayoutAlign="start start">
    <app-comp1 class="comp"></app-comp1>
    <app-comp2 class="comp"></app-comp2>
    <app-comp3 class="comp"></app-comp3>
</div>

问题是，如果添加更多小部件（

app-comp4

，等等），它们都显示在一行中，但如果当前行中没有空间，我希望小部件显示在新行中。小部件的数量是动态的，小部件的大小由css控制，而不是由

fxFlex=“xxx%”

控制，因此我不能使用

fxFlex=“xxx%”

---

有没有想过如何实现这一点？

您可以使用

fxLayout=“row wrap”

下面是stackblitz的工作原理示例。。。基本上将根据容器宽度将内容包装到新行。。。在stackblitz中缩小预览的宽度，测试框将换行到下一行

这里是wiki上附加信息的链接

Stackblitz

.comp {
  width: 700px;
  height: 500px;
}