Angular Flex-Layout

In this Post I'm going to show what is the Flex- Layout and How to use them.

Flex -Layout provides Angular developers with component layout features using a custom layout API. Angular Flex-Layout is a stand-alone library developed by the Angular team for designing sophisticated layouts.

When we creating an HTML page in Angular, using Angular Flex-Layout its allows us to easily create FlexBox-based page layouts with a set of directives available for use in your templates. So We don't Need to Create any CSS Style sheets or other external Style Sheets.

Flex layout directives for Flexbox containers

The following directives are used in flexbox container

1. fxLayout
2. fxLayoutGap
3. fxLayoutAlign

FxLayout

fxLayout is a directive used to define the layout of the HTML elements.

For Example :-

It decides the flow of children elements within a flexbox container and it should be applied to the parent DOM element . This directive is case sensitive and also allowed values of fxLayout are row, column, row-reverse, and column-reverse.

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

FxLayoutGap

fxLayoutGap is a directive that defines the gap between the children items within a flexbox container.

<div fxLayoutGap="20px"></div>

FxLayoutAlign

fxLayoutAlign directive defines the alignment of children elements within the flexbox parent container.

<div fxLayout="row" fxLayoutAlign="space-between"> </div>

Angular flex layout directives for flexbox children

Additionally we have more option in flex layout .These directives are applicable to flexbox children elements

• fxFlex
• fxFlexOrder
• fxFlexOffset
• fxFlexAlign
• fxFlexFil

What is FxFlex ?

It should be used on children’s elements inside a fxLayout container. It is responsible for resizing the elements along the main-axis of the layout.

<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="30"></div>
<div fxFlex="30"></div>
</div>

fxFlexOrder

The fxFlexOrder directive should be used on elements within a sorted fxLayout container and identifies the positional ordering of the element

<div fxLayout="row">
  <div fxFlexOrder="4">1. One</div>
  <div fxFlexOrder="2">2. Two</div>
  <div fxFlexOrder="3">3. Three</div>
  <div fxFlexOrder="1">4. Four</div>
</div>

fxFlexOffset

The fxFlexOffset directive should be used on on elements within a fxLayout container and dictates the margin between element

<div fxLayout="row">
  <div fxFlexOffset="10px">1. One</div>
  <div fxFlexOffset="5%">2. Two</div>
  <div fxFlexOffset="10vw">3. Three</div>
  <div fxFlexOffset="5vh">4. Four</div>
</div>

fxFlexAlign

The fxFlexAlign directive should be used on on elements within a sorted fxLayout container and dictates how the element should be aligned, overriding the container cross-axis alignment setting.

<div fxLayout="row">
  <div fxFlexAlign="start">1. One</div>
  <div fxFlexAlign="center">2. Two</div>
  <div fxFlexAlign="center">3. Three</div>
  <div fxFlexAlign="end">4. Four</div>
</div

fxFlexFil

The fxFlexFill directive should be used on elements within a fxLayout container and identifies the element whose width and height should be maximized

<div fxFlexFill>
  <div>1. One  </div> 
  <div>2. Two  </div>
  <div>3. Three</div> 
  <div>4. Four </div>
</div>

These are the basic things of Flex Layout and it has more features. we will see on another BLOG.. however now you have a idea about Flex Layout. Still if you have doubt in this concept you can able to refer this Link for more Understand https://tburleson-layouts-demos.firebaseapp.com/#/docs .

“ Do one thing every day that scares you”

Thank you for reading ……