angular - 如何在 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 等)等都代表一个小部件。我在 CSS 中设置了组件大小( comp1 、 comp2 等)

.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

Blitz

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