The installation

Using @angular/ Flex-Layout in an Angular CLI project is fairly simple and requires only two steps:

1. Install component instructions:npm install --save @angular/flex-layout
2. Import Angular Flex Layout into app.Module

// src/app/app.module.ts
	
 import {NgModule} from '@angular/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 @NgModule({
   imports: [FlexLayoutModule],
   ...
 })
 export class AppModule {}
Copy the code

Introduction to Angular Flex Layout

Angular Flex Layout uses FlexBox CSS + mediaQuery to design a page Layout. The basic FlexBox model is shown below:

The primary role of flex-Container and flex-item is flex-container. The primary container wraps the child elements and controls how they are arranged.

use

In Angular Flex Layout, THE HTML apis fall into three categories:

• Container classes Containers
• Child Elements within Containers class
• Special Response Features

Container classes

Create a FLexBox container that can contain more than one Flex child element.

• fxLayout
  • Controls the layout direction of child elements in a container
  • Example:<div fxLaout="row" fxLayout.xs="column"></div>
  • Settings:
    • Row: default value, left to right, top to bottom
    • Column: from top to bottom, then left to right
    • Row-reverse: Indicates the reverse of row
    • Column-reverse: indicates the reverse of column
    • Wrap: multiple lines
• fxLayoutWrap
  • Controls the layout of child elements in a container in a multi-line arrangement
  • Example:<div fxLayoutWrap></div>
• fxLayoutGap
  • Controls the creation of child elements in a container
  • Example:<div fxLayoutGap="10px"> </div>
  • Set point: acceptable units %, PX, VW, vh
• fxLayoutAlign
  • Controls the alignment of child elements within a container
  • Example:<div fxLayoutAlign="start stretch"> </div>
  • Settings:
    • Main-aixs: start, center, end, space-around, and space-between
    • Cross-axis: start, center, end, and stretch

Child element class

• fxFlex
  • Control the size of child elements, and how to automatically grow or shrink the size
  • Example:<div fxFlex="1 2 calc(15em + 20px)"></div>
  • Settings:
    • These units %, PX, VW, vh are acceptable
    • Order of setting values:<grow> <shrink> <basis>
• fxFlexOrder
  • Define the order
  • Example:<div fxFlexOrder="2"></div>
  • Set value: int
• fxFlexOffset
  • Sets the offset of the child element
  • Example:<div fxFlexOffset="20px"></div>
  • Set point: acceptable units %, PX, VW, vh
• fxFlexFill
  • Maximizes the width and height of the child elements
  • Example:<div fxFlexFill></div>

The fxFlex attribute is a combination of three properties, in order of flex-grow, flex-shrink, and flex-basis. The three properties are explained as follows:

• flex-grow
  • When the flex-basis length of a child element is smaller than the length assigned to its parent element, it is allocated numerically
  • The default value is 1. If set to 0, it will not be elastic and cannot be negative
• flex-shrink
  • When the child element flex-basis is larger than the length it is allocated from its parent, the compression ratio is allocated according to the number
  • The default value is 1. If set to 0, it will not be elastic and cannot be negative
• flex-basis
  • The base size of the child element, which is used to compare the size of the parent element
  • The default value is 0, and flex-basis can also be set to auto, indicating that the child element is in its own base size

Special response function

FlexBox CSS has no control over whether the DOM is displayed or not. This response allows you to control the display of containers or child elements.

• fxShow
  • Setting display conditions
  • Example:<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
• fxHide
  • Set hiding conditions
  • Example:<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>
• ngClass
  • Strengthen ngClass styling in Angular
  • Example:<div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>
• ngStyle
  • Strengthen ngStyle styling in Angular
  • Example:<div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

In response to a breakpoint

The blue line in the middle of the image is the range of breakpoints. In the example above, you might see something like fxLayout.xs. This controls the layout of the main container under XS breakpoints.

Here you’ll see prefixes like lt and gt for less then and greater then, respectively.