In this tutorial, we’ll learn how to use the CSS Flex-Layout by example in Angular 10/9.

What is Angular Flex Layout?

The Flex layout is a modern CSS layout for laying out elements in HTML pages.

Using flexbox CSS layout we can easily control and adjust the width and height of HTML elements based on the available vertical or horizontal space. It can also be used to easily center elements without complex CSS tricks.

We can use Flex layout to create various layouts and structures for different kinds of display devices and different screen sizes.

A flex container expands its child elements to fill available free space or shrinks them to prevent overflow.

Angular provides an official package for easily working with the Flex layout in Angular.

Let’s see how to use it with Angular 10/9 by example.

Installing Angular 10 Flex Layout

Let’s now see how to install Angular Flex-Layout in our Angular 10 projects.

Head over to your terminal and run the following command in your project:

npm install --save @angular/flex-layout @angular/cdk

After installing Angular Flex Layout, next import flexLayoutModule in yourapp.module.ts file as follows:

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

#angular-9 #angular-10 #angular