如何在 angular flex-layout 中换行，以便组件显示在新行中

Question

我有这样的布局：

<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>

每个组件（comp1、comp2等）等都代表一个小部件。我有我的部件尺寸（comp1，comp2，等）的CSS设置

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

问题是，如果添加更多小部件（app-comp4等），它们都显示在一行中，但如果当前行中没有空格，我希望小部件显示在新行中。窗口小部件的数目是动态的，而不是由CSS控制窗口小部件的大小fxFlex="xxx%"，所以不能使用fxFlex="xxx%"。

任何想法如何实施？

Answer 1

您可以使用 fxLayout="row wrap"

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

这是维基上其他信息的链接

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap

闪电战

https://stackblitz.com/edit/angular-material-flex-layout-seed-bvbudh?file=app%2Fquestionaire.component.ts