使用 fxLayoutWrap 的 Angular Flex-Layout 网格换行符答案

【问题标题】：Angular Flex-Layout Grid Line Break with fxLayoutWrap使用 fxLayoutWrap 的 Angular Flex-Layout 网格换行符
【发布时间】：2018-08-30 19:10:14
【问题描述】：

我曾经能够使用 fxLayoutWrap 在 angular flex-layout 中创建带有换行符的网格。

似乎它不再起作用了。无论我在 fxFlex 中输入什么数字，div 都不会转到下一行。我看到了例子Angular flex-layout with ngFor，但我不能让它在我这边工作。

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
  <div 
    fxFlex.gt-xs="50%" 
    [fxFlex.gt-md]="regularDistribution" 
    *ngFor="let country of countries">{{ country }}
  </div>
</div>

【问题讨论】：

我不确定 Angular flex-layout 是否仍然是处理网格布局的最佳方式。我想知道回到 Bootstrap .... 这意味着在 Angular 项目中回调 jquery .... :(
我没有机会回到 Bootstrap。必须有一种方法可以在带有 flex-layout 的网格中换行
你使用的是什么版本的 flex-layout？据我所知，fxLayoutWrap 指令在 6.0.0-beta.16 中已被弃用。您需要将其作为第二个参数添加到 fxLayout="row wrap"

标签： html angular angular-flex-layout

【解决方案1】：

我降级了“@angular/flex-layout”：“2.0.0-beta.10-4905443”，在 package.json 中，它又开始工作了……

【讨论】：