Css 带ngFor的角度柔性布局

我对flex布局非常陌生，无法修复以下问题：

我的下一个目标是：

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

结果:

如果我只想连续三个国家，换句话说，如果我想最后一个“德国”排在下一排呢

这是否只有通过创建多个fxLayout才能实现？我的意思是2个循环，1个用于创建fxLayout的数量，另一个内部循环用于显示我的国家/地区组件（fxFlex项目）。提前谢谢

我在以下位置找到了解决方案：

HTML:

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

---

这里的关键是带有angular 6和新版flex layout my代码的fxLayoutWrap=“wrap”

，代码如下所示：

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

...

如果在每个框上放置

最小宽度：33%

会发生什么？在标准flexbox中，它将确保rowfxLayout上最多只有3个项目可能是Angular 2指令。请提供浏览器中显示的结果（jsfiddle.net）HTML和CSS。我知道这种情况的解决方案。更新：事实上，这是Ng2指令（）。明天我会用它做一些测试，这样我可以用它的方法提供答案。@Marian07它确实是Angular 2，提前感谢你的例子@ChristopherMoore min width不起作用：如果您不动态更改布局，则可以将其简化为

fxLayout=“row wrap”

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

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