Angular flex-layout with ngFor

Question

I am very new to flexible layout and cannot fix the following:

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

My ngFor:

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

Result:

What if I want only 3 countries in a row, in other words, what if I want the last “Germany” to be on the next line?

Is this only possible when creating multiple fxLayout ? By this, I mean 2 cycles, 1 to create the fxLayout number and another inner loop to show the components of my country ( fxFlex ). Thanks in advance!

Answer 1

I found a solution on: How to control the number of items in a 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; 

wrap: multi-line / left to right in ltr; right to left in rtl

The key point here is fxLayoutWrap = "wrap"