Angular Flex layout

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

When creating HTML pages in Angular, we can easily create flexbox-based page layouts using angular flex-layout, which has a set of instructions available for use in your template. It eliminates the need to write a separate CSS style.

Responsive layouts are created using complex CSS code and media queries in normal CSS Flexbox or CSS Grid.

Powerful layout functions

Flex-Layout is a TypeScript-based UI layout engine that uses HTML markup to specify layout configurations.

Flex Layout Instructions for Flexbox Containers

Below are the APIs or Directives used on Flexbox Containers,

  • fxlayout
  • fxlayout gap
  • fxLayoutAlign
  • fxlayout

fxLayout is a directive used to define the layout of HTML elements. i.e., it decides the flow of child elements within the flexbox container and should be applied to the parent DOM element i.e. the flexbox container. This directive is case sensitive and the allowed values of fxLayout are row, column, row-reverse, and column-reverse.

fxLayoutAlign

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

Syntax:

Example:

fxLayoutGap

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

Example:

Angular flex layout directives for flexbox children

The following directives are applicable to flexbox children elements

  • fxFlex
  • fxFlexOrder
  • fxFlexOffset
  • fxFlexAlign

fxFlexFill

What is fxFlex?

fxFlex is one of the most useful and powerful APIs in Angular Flex Layout. It must be used on children elements inside the fxLayout container. It is responsible for resizing elements along the main-axis of the layout.

fxFlexOrder

Defines the order of a flexbox item,

fxFlexOffset

Offset a flexbox item in its parent container flow layout.

fxFlexAlign

Works like fxLayoutAlign, but applies only to a single flexbox item, Instead of all of them.

fxFlexFill

Maximizes the width and height of an element in a layout container.

Flex with Align-Self

'flex-align' can change the alignment for a single element only.

Understanding of Layout with 'layout-align'

Flex items are laid out in horizontal rows or vertical columns.

Layout Direction

We can defined layout direction as a container { fxLayout: row | row-reverse | column | column-reverse; } row (default): left to right in ltr; right to left in rtl;, which has four possible values:

  • row
  • row-reverse
  • column
  • column-reverse

Alignment in Layout Direction (Horizontal)

We can use layout alignment attributes value to adjust item's horizontally, and it's defined at main-axisfxLayoutAlign="". These have seven possible values,

  • none
  • start (default)
  • end
  • center
  • space-around
  • space-between
  • space-evenly

Alignment in Perpendicular Direction (Vertical)

The same concept applies to vertical layout alignment attributes:

  • none
  • start
  • center
  • end
  • stretch (default)

Use the following code to align the Layout vertically and horizontally.

Layout Direction: row

Alignment in LayoutDirection(Horizontal): start

Alignment in Perpendicular Direction(Vertical): center

Another example:

Layout Direction: column

Alignment in LayoutDirection(Horizontal): end

Alignment in Perpendicular Direction(Vertical): center

Another example:

Layout Direction: column

Alignment in LayoutDirection(Horizontal): end

Alignment in Perpendicular Direction(Vertical): center

Responsive Layout Directions

Angular Flex-Layout responsive API

Installation of Angular Flex-Layout

Use the following command to use Angular Flex layouts in your projects.

After installing flex layout we need to import flexLayoutModule in our app.module.ts file as shown below.

Let's create a component called card-layout in our project,

Lets add the example code shown below to the HTML template file after creating the card-layout component.

In this example, we have cards that are added on a row and aligned in the same column. When we check the responsiveness in the browser, it auto-adjusts the card layout due to the responsive breakpoints of fxLayout.md and fxLayout.lt-md of fxFlex.md and fxFlex.lt-md.

card-layout.component.html






Latest Courses