我是灵活布局的新手,无法修复以下内容:
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>
打字稿:
//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”