角形柔性版面包装物品会增长和收缩

Question

我有一个布局容器，其中显示以下项目：

我的代码：

<div fxLayout="column" fxFlex="50">
  <div fxLayout="row wrap" fxLayout.xs="column wrap" fxLayoutAlign="center center">
    <button mat-stroked-button color="primary" fxFlex="1 3 30" *ngFor="let category of categories">{{category.DISPLAY | translate}}</button>
  </div>
</div>

我希望该行根据可用空间来包装项目。在这种情况下，我希望“电子邮件”类别占据新包装行的整个空间。任何帮助将不胜感激。

Answer 1

简单的例子

<div fxLayout="row wrap" fxLayoutAlign="center center" >
      <button mat-stroked-button color="primary" fxFlex="3 0 33.3" *ngFor="let i of [1,2,3,4]">aaaaaaaaa</button>
  </div>