I am very new to flex-layout and having trouble fixing 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 only want 3 countries on a row, in other words what if I want the last 'Germany' to be on the next row?
Is this only possible by creating multiple fxLayout's? By that I mean 2 loops, 1 to create the number of fxLayout's and another inner loop to show my country components (fxFlex items). Thanks in advance!
With angular 6 and new version of flex-layout my code looking like this:
<div fxLayout="row wrap">
...
</div>
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With