css - ngFor的 Angular flex 布局

我对flex-layout非常陌生，无法解决以下问题:

https://github.com/angular/flex-layout

我的ngFor:

<div fxLayout.xs="column">
 <country fxFlex *ngFor="let country of countries" [country]="country"></country>
</div>

结果:



如果我只希望连续3个国家/地区，换句话说，如果我希望最后一个“德国”出现在下一行怎么办？

这只能通过创建多个 fxLayout 来实现吗？我的意思是说，有2个循环，其中1个用于创建 fxLayout 的数量，另一个是内部循环以显示我的国家/地区组件( fxFlex 元素)。提前致谢!

最佳答案

我在以下位置找到了解决方案:How to control number of items per row using media queries in Flexbox?

HTML:

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

typescript :

//I use this to show of expression bindings in flex-layout and because I don't want the calculated value in the HTML.
regularDistribution = 100 / 3;

此处的关键是 fxLayoutWrap =“wrap”