Flex Layout布局

安装

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

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

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的意思。