使用 ngFor 的 Angular 弹性布局

Posted 2023-03-06

【中文标题】使用 ngFor 的 Angular 弹性布局

【英文标题】：Angular flex-layout with ngFor

【发布时间】：2017-07-01 22:58:42

【问题描述】：

我对 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 项）。提前致谢！

【问题讨论】：

如果你把min-width: 33%放在每个盒子上会发生什么？在标准的 flexbox 中，它将确保最多只有 3 个项目在一行上

fxLayout 可能是 Angular 2 指令。请提供出现在浏览器中的结果 (jsfiddle.net) html 和 CSS。我知道这种情况的解决方案。

更新：确实，这是一个 Ng2 指令 (github.com/angular/flex-layout)。明天我会用它做一些测试，以便我可以使用它的方法提供答案。

@Marian07 确实是 Angular 2，在此先感谢您的示例！

@ChristopherMoore min-width 不起作用：S

【参考方案1】：

我找到了解决方案：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;

换行：ltr 中的多行/从左到右； rtl 从右到左

这里的关键是 fxLayoutWrap="wrap"

【参考方案2】：

使用 angular 6 和新版本的 flex-layout 我的代码如下所示：

<div fxLayout="row wrap">
   ...
</div>

【讨论】：

只是把它扔在那里，如果你不动态改变布局，这可以简化为fxLayout="row wrap"