góc flex-layout với ngFor

Question

Tôi rất mới để flex-bố trí và gặp khó khăn trong sửa chữa như sau:

https://github.com/angular/flex-layout

My ngFor:

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

Kết quả:

Nếu tôi chỉ muốn 3 quốc gia một hàng, nói cách khác nếu tôi muốn 'Đức' cuối cùng ở hàng kế tiếp thì sao?

Điều này chỉ có thể thực hiện bằng cách tạo nhiều fxLayout 's? Bởi vì tôi có nghĩa là 2 vòng, 1 để tạo ra số lượng fxLayout và một vòng lặp bên trong khác để hiển thị các thành phần quốc gia của tôi (fxFlex mục). Cảm ơn trước!

Answer 1

Tôi tìm thấy giải pháp trên: 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> 

nguyên cảo:

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

bọc: nhiều dòng/trái sang phải trong lít; phải sang trái trong rtl

Mấu chốt ở đây là fxLayoutWrap = "quấn"