Flex Layout布局

安装

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

1. 安装组件指令： npm install --save @angular/flex-layout
2. 将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断点下的布局方式，断点设定方式及适用范围请参考下表：

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