如何在 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 等），它们都显示在一行中，但如果当前行中没有 space，我希望小部件在新行中显示。小部件的数量是动态的，小部件大小由 css 控制而不是由 fxFlex="xxx%" 控制，所以我不能使用 fxFlex="xxx%"。

想过如何实现吗？

Answer 1

您可以使用fxLayout="row wrap"

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

这里是 link 维基上的附加信息

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

Stackblitz

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

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

How to Line break in angular flex-layout so component will display in the new line

angular

angular-flex-layout