強大的 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 CLI 專案使用相當簡單，只有兩個步驟：
- 安裝套件指令：
npm install @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 PizzaPartyAppModule {}
官方 Wiki 連結：Using Angular CLI
Angular Flex Layout 簡介
Angular Flex Layout 底層使用 FlexBox CSS + mediaQuery 達成版面布局的設計，FlexBox 的基本模型請參考下圖：
FlexBox 主要角色為主容器（flex-container）和子元素（flex-item），主容器來包各項子元素並控制子元素的排列方式。
使用方式
從文件中，HTML API 可以分出以下三類：
- 容器類 Containers
- 子元素類 Child Elements within Containers
- 特殊響應功能 Special Responsive Features
容器類 Containers
建立一個 FlexBox 容器，其中可包含一個以上的巢狀 Flex 子元素。
fxLayout- 控制容器內子元素的排版方向
- 範例：
<div fxLayout="row" fxLayout.xs="column"> </div> - 設定值：
row、column、row-reverse、column-reverse、wraprow：預設值，由左到右，從上到下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
- main-aixs:
子元素類 Child Elements within Containers
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
fxFlexAlign- 如同
fxLayoutAlign一樣，但只對該子元素有效 - 範例：
<div fxFlexAlign="center"></div> - 設定值：
start、baseline、center、end
- 如同
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，表示子元素以自己的基本大小為單位
特殊響應功能 Special Responsive Features
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>
- 強化 Angular 中
ngStyle- 強化 Angular 中
ngStyle的樣式設定 - 範例：
<div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>
- 強化 Angular 中
響應斷點
響應式的關鍵在於控制斷點，上圖中間藍色那行就是定義斷點的範圍，而在上面的範例中你可能會看到像是 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 的意思。
後記
這個套件雖然還沒有 release 版，不過滿方便使用的，比起自己寫 FlexBox CSS 方便多了。大部分的功能使用 Directive 來設定布局，但除此之外，還提供了可程式化的 JavaScript API 功能，十分強大呀。
我另外做了張 Angular Flex-Layout Cheat Sheet，提供給有需要的開發者們。
參考資料：
