我是 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;
wrap: multi-line / left to right in ltr; right to left in rtl
这里的关键是fxLayoutWrap="wrap"
关于css - 使用 ngFor 的 Angular flex 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42212846/