角柔性布局ngFor

我是很新的Flex的布局和有麻烦固定如下：角柔性布局ngFor

我ngFor：

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

结果：

如果我只想要3个国家换句话说，如果我想让最后一个'德国'进入下一排呢？

这是唯一可能的创建多个fxLayout的？我的意思是2个循环，1来创建fxLayout的数量和另一个内部循环来显示我的国家组件（fxFlex项目）。提前致谢！

来源

2017-02-13 Jdruwe

会发生什么，如果你把'最小宽度：33％'在每个箱子？在标准Flexbox中，它将确保最多只有3个项目连续排列 –

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

更新：的确，这是一个Ng2指令（https://github.com/angular/flex-layout）。明天我会做一些测试，所以我可以用它的方法提供答案。 – Marian07

我发现了解决方案：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 =“包装”

来源

2017-02-14 07:34:15 Jdruwe

角柔性布局ngFor

回答

相关问题