角柔性佈局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

回答

相關問題