How to make @angular/flex-layout wrap based on screensize

Question

I have 3 divs which i can make bigger or smaller based on the screen-size but cant get it to wrap like bootstrap. So for small screens i want the divs to be stacked vertically, large screen horizontally. eg Anyone know how i do this with Angular2? I chose to use the @angular/flex-layout which i npm'd.

Note: I dont think there is anything in the 'colored box' thats conflicting with anything.

Here is my code...

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  //templateUrl: './app/app.component.html',
  template:`

<div class="flex-container" fxFlex=100>
      <div class="colored box" >
        <div fxFlex.lg=100 fxFlex.md=50>  flexible for screensize  </div>
        <div fxFlex.lg=100> fxFlex </div>
        <div fxFlex=33> fxFlex </div>
      </div>
    </div>
    <div class="version">@angular/flex-layout (v2.0.0-beta.0)</div>
  `,
  styleUrls: ['./app/app.component.css']
})
export class AppComponent  { 

}

Answer 1

Try to use

fxLayout="row wrap"

, it will move the element into a new line. It worked for me, tested on different screen sizes.

Answer 2

You could use fxLayout/fxLayout.xs attribute for specifying layout format on different resolution. Where fxLayout can accept either column/row value.

column: division calculation will happen vertically.

row: division calculation will happen horizontally.

If you want to target any specific resolution mention it just after fxLayout like fxLayout.xs="column"

<div class="flex-container" 
     fxLayout="row" 
     fxLayout.xs="column">
  <div class="flex-item" fxFlex=50>  flexible for screensize  </div>
  <div class="flex-item" fxFlex=33> fxFlex </div>
  <div class="flex-item" fxFlex=33> fxFlex </div>
</div>