微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – 使用ngFor的Angular 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>

打字稿:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。