angular flex layout wrap 项目增长和收缩答案

【问题标题】：angular flex layout wrap items grow and shrinkangular flex layout wrap 项目增长和收缩
【发布时间】：2019-03-18 20:59:50
【问题描述】：

我有一个显示如下项目的布局容器：

我的代码：

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

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

【问题讨论】：

标签： flexbox angular-flex-layout

【解决方案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>

【讨论】：