kątowa flex-układ z ngFor

Question

Jestem bardzo nowe do Flex-układ i mający problemy mocowania następujące:

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

My ngFor:

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

Wynik:

Co jeśli chcę tylko 3 kraje rząd, innymi słowy, co jeśli chcę, aby ostatnie "Niemcy" znajdowały się w następnym rzędzie?

Czy jest to możliwe tylko po utworzeniu wielu numerów fxLayout? Mam tu na myśli 2 pętle, 1, aby utworzyć numer fxLayout i kolejną wewnętrzną pętlę, aby pokazać moje komponenty krajów (elementów fxFlex). Z góry dziękuję!

Answer 1

znalazłem rozwiązanie na: 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> 

Typescript:

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

okład: multi-line/lewej do prawej w ltr; od prawej do lewej w RTL

Kluczem tutaj jest fxLayoutWrap = "wrap"