Flex Layout布局

安装

要在Angular CLI项目中使用@angular/flex-layout相当简单，只需要两个步骤：

安装组件指令： npm install --save @angular/flex-layout
将Angular Flex Layout导入到app.module中

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

Angular Flex Layout简介

Angular Flex Layout底层使用FlexBox CSS + mediaQuery来实现页面布局的设计，FlexBox的基本模型请参考下图：

FlexBox主要角色为主容器(flex-container)和子元素(flex-item)，主容器来包各项子元素并控制子元素的排列方式。

使用方式

Angular Flex Layout中，HTML API可以分为以下三类：

容器类 Containers
子容器类 Child Elements within Containers
特殊响应功能 Special Response Features

容器类

建立一个FLexBox容器，其中可以包含一个以上的Flex子元素。

fxLayout
- 控制容器内子元素的排版方向
- 范例： <div fxLaout="row" fxLayout.xs="column"></div>
- 设定值:
  - row: 预设值，由左到右，从上到下
  - column: 从上到下，再由左到右
  - row-reverse: 与row相反
  - column-reverse: 与column相反
  - wrap: 多行
fxLayoutWrap
- 控制容器内子元素的排版方式采用多行方式排列
- 范例： <div fxLayoutWrap></div>
fxLayoutGap
- 控制容器内子元素的建个
- 范例：<div fxLayoutGap="10px"> </div>
- 设定值：可以接受这些单位%、px、vw、vh
fxLayoutAlign
- 控制容器内子元素的对齐方式
- 范例：<div fxLayoutAlign="start stretch"> </div>
- 设定值：
  - main-aixs: start、center、end、space-around、space-between
  - cross-axis: start、center、end、stretch

子元素类

fxFlex
- 控制子元素大小，以及如何自动增长或收缩大小
- 范例：<div fxFlex="1 2 calc(15em + 20px)"></div>
- 设定值:
  - 可接受这些单位 %、px、vw、vh
  - 设定值顺序：<grow> <shrink> <basis>
fxFlexOrder
- 定义排列顺序
- 范例： <div fxFlexOrder="2"></div>
- 设定值： int
fxFlexOffset
- 设定子元素的偏移
- 范例：<div fxFlexOffset="20px"></div>
- 设定值：可接受这些单位 %、px、vw、vh
fxFlexFill
- 最大化子元素，将子元素的width和height撑到最大
- 范例: <div fxFlexFill></div>

当中fxFlex有很大的变化单行可以设定，它由三个属性组合而成，依照先后顺序分别是flex-grow、flex-shrink 和 flex-basis，三个属性的解释如下：

flex-grow
- 当子元素的flex-basis长度小于它父元素分配到的长度，按照数字做相对应的伸展比例分配
- 数字，无单位，预设值为1，设为0的话不会进行弹性变化，不可为负值
flex-shrink
- 当子元素flex-basis长度大于它从父元素分配到的长度，按照数字做对应的压缩比例分配
- 数字，无单位，预设值为1，设为0的话不会进行弹性变化，不可为负值
flex-basis
- 子元素的基本大小，作为父元素的大小比较基准
- 预设值为0， flex-basis也可以设为auto，表示子元素以自己的基本大小为单位

特殊响应功能

FlexBox CSS本身无法控制DOM的显示与否，透过此特殊响应功能，方便我们控制容器或子元素的显示。

fxShow
- 设定显示条件
- 范例: <div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
fxHide
- 设定隐藏条件
- 范例：<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>
ngClass
- 强化Angular中ngClass的样式设定
- 范例：<div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>
ngStyle
- 强化Angular中的ngStyle的样式设定
- 范例：<div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

响应断点

响应式的关键在于控制断点，上图中间蓝色那行就是定义断点的范围，而在上面的范例中你可能会看到像fxLayout.xs这样的写法，这就是在控制主容器在xs断点下的布局方式，断点设定方式及适用范围请参考下表：

断点	适用范围
xs	width < 600px
sm	600px <= width < 960px
md	960px <= width < 1279px
lg	1280px <= width < 1919px
xl	1920px <= width < 5000px
lt-sm	width <= 599px
lt-md	width <= 959px
lt-lg	width <= 1279px
lt-xl	width <= 1919px
gt-xs	width >= 600px
gt-sm	width >= 960px
gt-md	width >= 1280px
gt-lg	width >= 1920px

这里你会看到lt和gt这样的前缀次，分别是代表less then和greater then的意思。