How to achieve such layout with Angular Flex-Layout

Question

how could i achieve this layout using Angular Flex-Layout?

Since i'm using angular material. It seems that i need to use this flex-layout lib instead of bootstrap but the problem is that i can't get it working, so any help is welcome thanks.

*i'm not looking for responsiveness, if i can get this layout just as the image it would help-me a lot.

Answer 1

Well, install flex-layout.

Import layout module to your project/module:

import {FlexLayoutModule} from '@angular/flex-layout';
...
@NgModule({
 imports: [
   ...
   FlexLayoutModule,
   ...
 ]
})

And finally, in the HTML:

<div fxLayout="row" style="height: 100%">
  <div style="background-color: red" fxFlex="20"></div>
  <div fxLayout="column" fxFlex>
    <div style="background-color: blueviolet" fxFlex></div>
    <div style="background-color: cornflowerblue" fxFlex></div>
    <div style="background-color: darkgray" fxFlex></div>
  </div>
</div>

fxFlex="20" gives the first div 20% width. fxFlex with no params just spreads the height or width evenly between elements.