Angular Flex Layout使用详解

1. 前言

1.1. update on 5th/Apr/2023

根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.

具体原因参考官方的 anoucement - Medium post
和 github 上的讨论

建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.

迁移工具:

migrate-angular-flex-to-tailwind

[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)

1.2. update on 25th/June/2023

目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.

所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout

新家现在位于

@ngbracket/ngx-layout。

2. 安装

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

1. 安装组件指令

   npm install @angular/flex-layout --save

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 {}

3. Angular Flex Layout 简介

Flex Layout 布局 cheatsheet

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

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

4. 使用方式

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

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

4.1. 容器类

建立一个 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

4.2. 子元素类

• fxFlex

  • 控制子元素大小，以及如何自动增长或收缩大小

  • 范例：<div fxFlex="1 2 calc(15em + 20px)"></div>

  • 设定值:

    • 可接受这些单位 %、px、vw、vh
    • 设定值顺序：<grow> <shrink> <basis>

  • fxFlex 详细介绍可以参考https://www.angularjswiki.com/flexlayout/fxflex

  • 当中 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，表示子元素以自己的基本大小为单位

• fxFlexOrder

  • 定义排列顺序
  • 范例： <div fxFlexOrder="2"></div>
  • 设定值： int

• fxFlexOffset

  • 设定子元素的偏移
  • 范例：<div fxFlexOffset="20px"></div>
  • 设定值：可接受这些单位 %、px、vw、vh

• fxFlexFill

  • 最大化子元素，将子元素的 width 和 height 撑到最大
  • 范例: <div fxFlexFill></div>

4.3. 特殊响应功能

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>

4.4. 响应断点

屏幕断点是响应式设计的基础依据，它决定了我们要适配到什么样的设备或屏幕规格，并通过“媒体查询”这样的技术实现不同 “屏幕断点” 条件下的不同 UI 表现。一般情况屏幕断点都是手机、平板、PC 这三个维度设计。

响应式的关键在于控制断点，而在上面的范例中你可能会看到像 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	超大屏

具体各机型手机屏幕尺寸可查看手机屏幕尺寸大全

5. 如何修改屏幕尺寸

例如，要将 XL 断点从 1920px 更改为 1600px，请在 app.module.ts 中添加以下代码：

import { DEFAULT_BREAKPOINTS } from "@angular/flex-layout";

DEFAULT_BREAKPOINTS.find((item) => item.alias == "lg").mediaQuery =
  "screen and (min-width: 1280px) and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find((item) => item.alias == "xl").mediaQuery =
  "screen and (min-width: 1600px) and (max-width: 4999.98px)";
DEFAULT_BREAKPOINTS.find((item) => item.alias == "lt-xl").mediaQuery =
  "screen and (max-width: 1599.98px)";
DEFAULT_BREAKPOINTS.find((item) => item.alias == "gt-lg").mediaQuery =
  "screen and (min-width: 1600px)";

6. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

7. 参考文档

Angular 开发布局利器：Angular Flex Layout

flex layout