fxLayoutWrap not working

Question

I've got these blocks of codes

<div fxLayout="row" fxLayoutGap="1em" fxLayout.lt-md="column" fxLayoutWrap>
    <div *ngFor="let post of posts; let i=index" >
         <div *ngIf = "i%3===0" fxFlex="90%" fxFlex.lt-md="100%">
             <!--Some code-->
         </div>
         <div *ngIf = "!(i%3===0)" fxFlex="40%" fxFlex.lt-md="100%">
             <!--Some other code-->
         </div>
    </div>
</div>

I want the stuff to be on the same row when I use fxFlex="40%" However, they appear on different rows

You need `fxFlex="40%" fxFlex.lt-md="100%"` in the same `div` as the `ngFor`, not the child. — Z. Bagley, Dec 08 '17 at 01:06
What version of flex-layout are you using? I only discovered the same problem when upgraded my project to 6.0.0-beta.16 — Uliana Pavelko, Jun 20 '18 at 17:34

score 34 · Accepted Answer · answered Mar 13 '18 at 10:50

34

https://github.com/angular/flex-layout/blob/cb0beab46507aa50c513aca8bb6ef632c397035c/CHANGELOG.md#breaking-changes

fxLayoutWrap has been removed. You can use fxLayout options.

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

answered Mar 13 '18 at 10:50

cihangir zengin

468
1
6
11

WOWnderful! Thank you so much! – Nicolae Olariu Nov 06 '18 at 15:41

score 2 · Answer 2 · answered Jun 20 '18 at 18:04

2

flex-layout 6.0.0-beta.16, since fxLayoutWrap directive has been deprecated in this version

<div fxLayout="column" fxLayoutAlign=" none">
  <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="space-around stretch" fxLayout.xs="column">
    <div *ngFor="let item of items | async" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33" fxFlex.lg="33" fxFlex.xl="33">
     {{item}}
    </div>
  </div>
</div>

answered Jun 20 '18 at 18:04

Uliana Pavelko

2,824
28
32

Had no problems with fxLayoutWrap in previous versions of flex-layout – Uliana Pavelko Jun 20 '18 at 18:06

score 1 · Answer 3 · answered Feb 18 '21 at 05:24

1

fxLayoutWrap: * [fxLayoutWrap] was deprecated in earlier betas. fxLayoutWrap has now been removed. Developers should use fxLayout options.

Before

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

current

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

answered Feb 18 '21 at 05:24

Abdul Khalik

31
7

fxLayoutWrap not working

3 Answers3