Угловая сгибать-макет с ngFor

Question

Я очень новой для Flex-макета и возникают проблемы крепления следующие:

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

Мои ngFor:

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

Результат:

Что делать, если я хочу только 3 страны строка, другими словами, что, если я хочу, чтобы последняя «Германия» была в следующем ряду?

Возможно ли это только путем создания нескольких fxLayout? Под этим я имею в виду 2 цикла, 1 для создания числа fxLayout и другого внутреннего цикла, чтобы показать компоненты моей страны (fxFlex элементов). Заранее спасибо!

Answer 1

Я нашел решение на: 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; 

обертывание: многострочный/слева направо в литровых; справа налево в РТЛ

Ключевым моментом здесь является fxLayoutWrap = «завернуть»