使用 Angular Flex-Layout

使用 Angular Flex-Layout

强大的 Angular 团队在Github 上有个库叫做angular/flex-layout，将FlexBox CSS 包装成一个个 Directive 来使用，这个Flex Layout 库辅助 Angular (v4.1 以上版本) 用更方便的方式来布局HTML模板。

因为 angular/material2 不包含 Flex 版面布局系统，如果想要在 Material2 进行排版时，可以安装 angular/flex-layout 此工具来处理版面布局。

从 caniuse 可以看到目前各大浏览器都支援 FlexBox CSS 样式，但请注意 IE 10 以上版本仅部分支援。

安装

要在 Angular 中使用相当简单，只有两个步骤：

1. 安装套件指令

   npm install @angular/flex-layout
   

2. 将 Angular Flex-Layout 导入至 app.module 中

    // src/app/app.module.ts
   
    import {NgModule