Step 1. install libary
Install Flex Layout from npm:
Module: app.module.ts
Template: app.component.html
That’s all we need to create our layout, no CSS needed. And most of the directives are pretty self-explanatory too. In our demo, only minor styling was added like a background color and rounded corners to our items.
Here are a few takeaways:
The fxLayout directive on the container sets the flex container. Its value defaults to row, so we don’t need to provide any value for the default behavior.
We want the layout to collapse into a single column on extra-small devices, so we use the .xs notation with fxLayout to give it a direction of column. We could also use other breakpoints like sm, md, lg and xl.
We changed the order of the items in our 1st row by using the fxFlexOrder directive on Item 2.
We set gaps between flex items with fxLayoutGap.
The classes used on the container and items (container, item, item-1, …) are not needed by Flex Layout. They are used for our own extra styling.
We hard-coded the directive values in this example, but we could just as well have used data binding to bind to values in the component class (E.g. [fxLayout]="direction"). This makes it easy to create highly dynamic layouts that the user can control and change.
Install Flex Layout from npm:
$ npm install @angular/flex-layout --saveNow import FlexLayoutModule in your app module:
Module: app.module.ts
import { FlexLayoutModule } from "@angular/flex-layout";markup needed in our template to create the layout:0
@NgModule({
imports: [
BrowserModule,
FlexLayoutModule.forRoot()
],
// ...
})
export class AppModule {}
Template: app.component.html
<div class="container"Introduce flex-layout
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="15%">Item 1</div>
<div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
<div class="item item-3" fxFlex>Item 3</div>
</div>
<div class="container"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-4" fxFlex fxFlexOffset="50px" fxFlexOffset.xs="0">Item 4</div>
<div class="item item-5" fxFlex="200px">Item 5</div>
</div>
That’s all we need to create our layout, no CSS needed. And most of the directives are pretty self-explanatory too. In our demo, only minor styling was added like a background color and rounded corners to our items.
Here are a few takeaways:
The fxLayout directive on the container sets the flex container. Its value defaults to row, so we don’t need to provide any value for the default behavior.
We want the layout to collapse into a single column on extra-small devices, so we use the .xs notation with fxLayout to give it a direction of column. We could also use other breakpoints like sm, md, lg and xl.
We changed the order of the items in our 1st row by using the fxFlexOrder directive on Item 2.
We set gaps between flex items with fxLayoutGap.
The classes used on the container and items (container, item, item-1, …) are not needed by Flex Layout. They are used for our own extra styling.
We hard-coded the directive values in this example, but we could just as well have used data binding to bind to values in the component class (E.g. [fxLayout]="direction"). This makes it easy to create highly dynamic layouts that the user can control and change.
