Angular flex-layout with ngFor

Question

I am very new to flex-layout and having trouble fixing the following:

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

My ngFor:

        
                      

              相关标签:
       
      

Answer 1

With angular 6 and new version of flex-layout my code looking like this:

<div fxLayout="row wrap">
   ...
</div>

Answer 2

I found the solution on: 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;

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

The key here is the fxLayoutWrap="wrap"