12

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:

enter image description here

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!

DilumN
  • 2,889
  • 6
  • 30
  • 44
Jdruwe
  • 3,450
  • 6
  • 36
  • 57
  • What happens if you put `min-width: 33%` on each box? In standard flexbox, it will ensure only 3 items max are on a row – Christopher Moore Feb 13 '17 at 21:19
  • fxLayout is probably a Angular 2 Directive. Please provide the resulting(jsfiddle.net) HTML and CSS which appear in the browser. I know the solution for this situation. – Marian07 Feb 13 '17 at 21:43
  • Update: Indeed, it's a Ng2 Directive(https://github.com/angular/flex-layout). I'll make some tests tomorrow with it so I can provide the answer using its methods. – Marian07 Feb 13 '17 at 21:52
  • @Marian07 It is indeed Angular 2, thanks in advance for you example! – Jdruwe Feb 14 '17 at 06:53
  • @ChristopherMoore min-width does not work :S – Jdruwe Feb 14 '17 at 07:12

2 Answers2

14

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"

Community
  • 1
  • 1
Jdruwe
  • 3,450
  • 6
  • 36
  • 57
10

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

<div fxLayout="row wrap">
   ...
</div>
x64vs32x
  • 173
  • 1
  • 3
  • 9
  • 2
    Just throwing this out there, If you aren't dynamically changing the layout, this can be simplified to `fxLayout="row wrap"` – calbear47 Jul 23 '18 at 08:17