JIYIK CN >

This tutorial will discuss and demonstrate how to use Angular flex layout.

Angular flex layout is an Angular component that implements a responsive layout system based on flexbox. It enables us to build layouts that respond well on mobile devices and desktop screens.

Flexbox is a layout pattern that arranges items in a container based on the available space and the order specified in the source code, which means it automatically adjusts based on the screen size.

This is different from other layout modes (such as grid or absolute positioning), where items have positions explicitly set.

Problems with CSS-based Flexbox

CSS-based flexbox is a simple and intuitive way to create layouts, but there are some problems when using this approach. One of the main problems is the lack of support for older browsers such as IE 9, IE 10, Safari 5, and Opera 12.

Another problem with CSS-based flexbox is that it doesn’t work well with responsive design. This is because it’s difficult to make the layout look good on different screen sizes without adding extra code or images.

The amount of CSS generated for flexbox CSS is huge (>250k), and if we change the layout direction we have to change the child flexbox styles. There is also no support for custom media query breakpoints.

The above problems have been solved by using angular flex layout. Angular flex layout is a pure TypeScript UI layout engine that specifies layout settings through HTML tags (layout API).

Flex layout in Angular

Angular flex layout is a new layout engine introduced in Angular version 4.0. Flex layout is flexboxa child of CSS Flexible Box Layout Module (or CSS for short).

Flex layout allows for a more natural and intuitive way to specify how content is laid out within a container. This can be done by defining a central axis, which determines how the flex items are distributed within the container, and then specifying one or more secondary axes to define their size and position relative to other items.

The main advantages of using Angular flex layout are:

• It’s easier to use than other options;
• It allows you to quickly create responsive designs;
• It is not limited to two dimensions like floats or inline-block;
• It has more options than CSS Grid.

To create a responsive layout using standard CSS flexbox or CSS grid, we have to write complex CSS code using media queries. It is also challenging to understand.

However, we can use the new Angular flexbox layout to declare flexbox layout parameters directly in the HTML template using flexbox attributes.

Steps to implement Flex layout in Angular

Angular flex layout enables developers to create responsive UI layouts. It is designed to work on browsers and supports both mobile and desktop environments.

This tutorial will walk you through the following steps:

• Create a new project using Angular CLI.
• Add the Bootstrap CSS framework.
• Add a flex layout module to your project.
• Add a container component.
• Create two components (header and footer components).
• Implement the flex-direction property on the container component.

Let us discuss an Angular flex layout example using the steps mentioned above.

TypeScript code:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

HTML code:

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>