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中缩小预览的宽度，测试框将包装到下一行。

此处是Wiki上其他信息的链接

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

如何在角度弯曲布局中换行，使组件显示在新行中

1 个答案: