為什麼要了解 FlexBox?
最近時不時的聽到關於 FlexBox 的聲音，除了在 Weex 以及 React Native 兩個著名的跨平臺專案裡有用到 FlexBox 外，AsyncDisplayKit 也同樣引入了 FlexBox 。
先說說 iOS 本身提供給我們 2 種佈局方式:
- Frame,直接設定橫縱座標，並指定寬高。
- Auto Layout，通過設定相對位置的約束進行佈局。
Frame 沒什麼太多可說的了，直接制定座標和大小，設定絕對值。
Auto Layout 本身用意是好的，試圖讓我們從 Frame 中解放出來，擺脫關於座標和大小的刻板思考方式。轉而利用 UI 之間的相對位置關係，設定對應約束進行佈局。
但是 Auto Layout 好心並未做成好事，它的語法又臭又長! 至今學習 iOS 兩年，我使用到原生 Auto Layout 語法的時候屈指可數。只能靠 Masonry 這樣的第三方庫來使用它。
Auto Layout 的原理
說完了 Auto Layout 的使用，再來看看它工作原理。
實際上，我們設定 Auto Layout 的約束，就構成一系列的條件,成為一個方程。然後解出 Frame 的座標和大小。
例如，我們設定一個名為 A 的 UI :
A.center = super.center
A.width = 40
A.height = 40
複製程式碼則: A.frame = (super.center.x-40/2,super.center.y-40/2,40,40)
再設定一個 B:
B.width = A.width
B.height = A.height
B.top = A.bottom + 50
B.left = A.left
複製程式碼則: B.frame = ( A.x , A.y + A.height + 50 , A.width , A.height )
如圖：
Cassowary
Auto Layout 內部有專門用來處理約束關係的演算法，我一直以為是蘋果自家研發的，查閱資料才發現是來自一個叫 Cassowary 的演算法。
Cassowary是個解析工具包，能夠有效解析線性等式系統和線性不等式系統，使用者的介面中總是會出現不等關係和相等關係，Cassowary開發了一種規則系統可以通過約束來描述檢視間關係。約束就是規則，能夠表示出一個檢視相對於另一個檢視的位置。
有興趣的可以進一步瞭解該演算法的實現。
Frame / Auto Layout / FlexBox 的效能對比
在對 Auto Layout 進行一番瞭解之後,我們很容易得出 Auto Layout 因為多餘的計算，效能差於 Frame 的結論。
但究竟差多少呢？FlexBox 的表現又如何呢?
這裡根據 從 Auto Layout 的佈局演算法談效能 裡的測試程式碼進行修改，對 Frame / Auto Layout / FlexBox 進行佈局，分段測算 10 ～ 350 個 UIView 的佈局時間。取 100 次佈局時間的平均值作為結果,耗時單位為秒。
結果如下圖:
雖然測試結果難免有偏差，但是根據折線圖可以明顯發現，FlexBox 的佈局效能是比較接近 Frame 的。
60 FPS 作為一個 iOS 流暢度的黃金標準，要求佈局在 0.0166667 s 內完成，Auto Layout 在超過 50 個檢視的時候，可能保持流暢就會開始有問題了。
本次測試使用的機器配置如下：
採用 Xcode9.2 ,iPad Pro (12.9-inch)(2nd generation) 模擬器。
測試佈局的專案程式碼上傳在 GitHub
FlexBox 是什麼？
FlexBox 是一種 UI 佈局方式，並得到了所有瀏覽器的支援。FlexBox 首先是基於 盒裝狀型 的，Flexible 意味著彈性，使其能適應不同螢幕，補充盒狀模型的靈活性。
FlexBox 把每個檢視，都看作一個矩形盒子，擁有內外邊距，沿著主軸方向排列，並且，同級的檢視之間沒有依賴。
和 Auto Layout 類似，FlexBox 採用了描述性的語言去進行佈局，而不像 Frame 直接用絕對值座標進行佈局。
彈性佈局的主要思想是讓 Flex Container 有能力來改變 Flex Item 的寬度和高度，以填滿可用空間（主要是為了容納所有型別的顯示裝置和螢幕尺寸）的能力。
最重要的是, FlexBox 佈局與方向無關，常規的佈局設計缺乏靈活性，無法支援大型和複雜的應用程式（特別是涉及到方向轉變，縮放、拉伸和收縮等）。
FlexBox 組成
採用 FlexBox 佈局的元素，稱為 Flex Container。
Flex Container 的所有子元素，稱為 Flex Item。
下面會講一下 FlexBox 裡面的一些概念，方便之後進行 FlexBox 的使用。
Flex Container
前面提到了，FlexBox 的一個特點，就是檢視之間，是沒有依賴的。
Flex Item 的排布，就依賴於 Flex Container 的屬性設定，而不用相互之間進行設定。
所以先說一下 Flex Containner 的屬性設定。
Flex Direction
FlexBox 有一個 主軸(main axis) 和 側軸(cross axis)的概念。側軸垂直於主軸。
它們可以是水平，也可以是垂直。
主軸預設為 Row , 側軸預設為 Column：
Flex Direction 決定了 Flex Containner 內的主軸排布方向。
主軸預設為 Row (從左到右):
同時，也可以設定 RowRevers(從右至左):
Column(從上到下):
ColumnRevers(從下到上):
Flex Wrap
Flex Wrap 決定在軸線上排列不下時，檢視的換行方式。
Flex Wrap 預設設定為 NoWrap，不會換行，一直沿著主軸排列到螢幕之外:
設定為 Wrap ,則空間不足時，自動換行:
設定 WrapReverse，則換行方向與 Wrap 相反:
這是一個非常有用的屬性。比如典型的九宮格佈局，iOS 如果不是用 UICollectionView 做，那麼就需要儲存 9 個例項，然後做判斷，計算 frame ，可維護性實在不高。使用UICollectionView 可以很好的解決佈局，但很多場景並不能複用，做起來也不是特別簡單。
FlexBox 佈局的話，用 Flex Wrap 屬性設定 Wrap 就可以直接搞定。
移動平臺上相似的方案，比如 Android 的 Linear Layout 和 iOS 的 UIStackView ，但卻遠沒有 FlexBox 強大。
Display
Display 選擇是否計算它，預設為 Flex. 如果設定為 None 自動忽略該檢視的計算。
在根據邏輯顯示 UI 時，比較有用。
比如我們現有的業務，需要顯示的騰訊身份標示。按照一般做法，多個 icon 互相連成一排，根據身份去設定不同的距離，同時隱藏其他 icon ,比較的麻煩。iOS 最好的辦法是使用 UIStackView ，這又有版本相容等問題。而使用 FlexBox 佈局,當不是某個身份時，只要設定 Display 為 None,就不會被納入 UI 計算當中。
Justify Content
Justify Content 用於定義 Flex Item 在主軸上的對齊方式:FlexStart(主軸起點對齊)，FlexEnd(主軸終點對齊)，Center(居中對齊)。
還有SpaceBetween（兩端對齊）:
設定兩端對齊，讓 Flex Item 之間的間隔相等。
SpaceAround(外邊距相等排列)：
讓每個 Flex Item 四周的外邊距相等
Align Items
Align Items 定義 Flex Item 在側軸上的對齊方式。
Align Items 可以和主軸對齊方式 Justify Content 一樣,設定FlexStart ,FlexEnd,Center,SpaceBetween,SpaceAround 。
Align Items 還可以設定 Baseline(基線對齊)：
如圖所示，它是基於 Flex Item 的第一行文字的基線對齊。
如果 Baseline 和 Flex Item 的行內軸與側軸為同一條，則該值與 FlexStart 等效。 其它情況下，該值將參與基線對齊。
Align Items 還可以設定為 Stretch：
Stretch 讓 Flex Item 拉伸填充整個Flex Container。Stretch會使Flex Item的外邊距在遵照對應屬性限制下,儘可能接近所在行或列的尺寸。
如果 Flex Item 未設定數值,或設為 auto，將佔滿整個Flex Container的高度
Align Content
Align Content 也是側軸在 Flex Item 裡的對齊方式，只不過是以一整個行，作為最小單位。
注意，如果Flex Item只有一根軸線（只有一行的Flex Itme），該屬性不起作用。
調整為 FlexWrap 為 Wrap,效果才顯示出來：
Flex Item
在上面說完了 Flex Container 的屬性,終於說到了 Flex Item. Flex Container 裡的屬性，都是作用於自己包含的 Flex Item，Flex Item 的屬性，都是作用於自己本身，.
AlignSelf
AlignSelf 可以讓單個 Flex Item 與其它 Flex Item 有不一樣的對齊方式，覆蓋 Align Items屬性。
預設值為auto，表示繼承Flex Container的Align Items屬性。如果它本身沒有Flex Container，則等同於Stretch。
FlexGrow
FlexGrow 可以設定分配剩餘空間的比例。即如何擴大。
FlexGrow 預設值為 0，如果沒有去定義 FlexGrow，該佈局是不會擁有分配剩餘空間權利的。
例如：
整體寬度 100 , sub1 寬為 10 ，sub2 寬為 20 ，則剩餘空間為 70。
設定 FlexGrow 就是分配這 70 寬度的比例。
再說比例值的問題:
如果所有 Flex Item 的 FlexGrow 屬性都為 1 ，如果有剩餘空間的話，則等分剩餘空間。
如果一個 Flex Item 的 FlexGrow 屬性為 2，其餘 Flex Item 都為 1 ，則前者佔據的剩餘空間將比其他 Flex Item 多 1 倍。
FlexShrink
與 FlexGrow 處理空間剩餘相反，FlexShrink 用來處理空間不足的情況。即怎麼縮小。
FlexShrink 預設為1，即如果空間不足，該專案將縮小
如果所有 Flex Item 的 FlexShrink 屬性都為 1，當空間不足時，都將等比例縮小。
如果一個 Flex Item 的 FlexShrink 屬性為 0 ，其餘 Flex Item 都為1，則空間不足時，FlexShrink 為 0 的前者不縮小。
FlexBasis
FlexBasis 定義了在分配多餘的空間之前， Flex Item 佔據的 main size（主軸空間）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。
FlexBasis 的預設值為 auto，即 Flex Item 的本來大小。
想了解更多 FlexBox 屬性，可以參考 A Complete Guide to Flexbox
FlexBox 的實現 -- Yoga
最開頭已經介紹過，FlexBox 佈局已經應用於幾個知名的開源專案，它們用到的就是來自於 Facebook 的 Yoga.
Yoga 是由 C 實現的 Flexbox 佈局引擎，效能和穩定性已經在各大專案中得到了很好的驗證,但不足的是 Yoga 只實現了 W3C 標準的一個子集。
下面將針對 Yoga iOS 上的實現 YogaKit 做一些講解。
基於上面對 FlexBox 佈局的基本瞭解，作一些簡單的佈局。
YGLayout
整個 YogaKit 的關鍵，就在於 YGLayout 物件當中。通過 YGLayout 來設定佈局屬性。
在 UIView+Yoga.h 的檔案裡:
/**
The YGLayout that is attached to this view. It is lazily created.
*/
@property (nonatomic, readonly, strong) YGLayout *yoga;
/**
In ObjC land, every time you access `view.yoga.*` you are adding another `objc_msgSend`
to your code. If you plan on making multiple changes to YGLayout, it's more performant
to use this method, which uses a single objc_msgSend call.
*/
- (void)configureLayoutWithBlock:(YGLayoutConfigurationBlock)block
NS_SWIFT_NAME(configureLayout(block:));
複製程式碼可以看到一個名為 yoga 的 YGLayout 只讀物件，和 configureLayoutWithBlock:(YGLayoutConfigurationBlock)block 方法，並且還使用了 NS_SWIFT_NAME() 來定義在 Swift 裡的方法名。
這樣我們就可以直接使用 UIView 的例項物件，來直接設定它對應的佈局了。
isEnabled
YGLayout.h 裡是這麼定義 isEnabled 的。
/**
The property that decides during layout/sizing whether or not styling properties should be applied.
Defaults to NO.
*/
@property (nonatomic, readwrite, assign, setter=setEnabled:) BOOL isEnabled;
複製程式碼isEnabled 預設為 NO，需要我們在佈局期間設定為 YES，來開啟 Yoga 樣式.
applyLayoutPreservingOrigin:
對於這個方法，標頭檔案裡是這麼解釋的:
/**
Perform a layout calculation and update the frames of the views in the hierarchy with the results.
If the origin is not preserved, the root view's layout results will applied from {0,0}.
*/
- (void)applyLayoutPreservingOrigin:(BOOL)preserveOrigin
NS_SWIFT_NAME(applyLayout(preservingOrigin:));
複製程式碼簡單來說，就是用於執行 layout 計算的。所以，一旦在佈局程式碼完成之後，就要在根檢視的屬性 yoga 物件上呼叫這個方法，應用佈局到根檢視和子檢視。
佈局演示
下面通過例項來介紹如何使用 Yoga 進行 FlexBox 佈局。
居中顯示
[self configureLayoutWithBlock:^(YGLayout * layout) {
layout.isEnabled = YES;
layout.justifyContent = YGJustifyCenter;
layout.alignItems = YGAlignCenter;
}];
[self.redView configureLayoutWithBlock:^(YGLayout * layout) {
layout.isEnabled = YES;
layout.width=layout.height= 100;
}];
[self addSubview:self.redView];
[self.yoga applyLayoutPreservingOrigin:YES];
複製程式碼效果如下:
我們真正的佈局程式碼，只用設定 Flex Container 的 justifyContent 和 alignItems 就可以了.
巢狀佈局
讓一個 view 略小於其 superView,邊距為10:
[self.yellowView configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.margin = 10;
layout.flexGrow = 1;
}];
[self.redView addSubview:self.yellowView];
複製程式碼效果如下：
佈局程式碼只用設定, View 的 margin 和 flexGrow.
等間距排列
縱向等間距的排列一組 view:
[self configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.justifyContent = YGJustifySpaceBetween;
layout.alignItems = YGAlignCenter;
}];
for ( int i = 1 ; i <= 10 ; ++i )
{
UIView *item = [UIView new];
item.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
saturation:( arc4random() % 128 / 256.0 ) + 0.5
brightness:( arc4random() % 128 / 256.0 ) + 0.5
alpha:1];
[item configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.height = 10*i;
layout.width = 10*i;
}];
[self addSubview:item];
}
複製程式碼效果如下:
只要設定 Flex Container 的 layout.justifyContent = YGJustifySpaceBetween，就可以很輕鬆的做到。
等間距，自動設寬
讓兩個高度為 100 的 view 垂直居中,等寬,等間隔排列,間隔為10.自動計算其寬度：
[self configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.flexDirection = YGFlexDirectionRow;
layout.alignItems = YGAlignCenter;
layout.paddingHorizontal = 5;
}];
YGLayoutConfigurationBlock layoutBlock =^(YGLayout *layout) {
layout.isEnabled = YES;
layout.height= 100;
layout.marginHorizontal = 5;
layout.flexGrow = 1;
};
[self.redView configureLayoutWithBlock:layoutBlock];
[self.yellowView configureLayoutWithBlock:layoutBlock];
[self addSubview:self.redView];
[self addSubview:self.yellowView];
複製程式碼效果如下 :
我們只要設定 Flex Container 的 paddingHorizontal ，以及 Flex Item的marginHorizontal，flexGrow 就可以了。並且可以複用 Flex Item 的 layout 佈局樣式。
UIScrollView 排列自動計算 contentSize
在 UIScrollView 順序排列一些 view,並自動計算 contentSize：
[self configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.justifyContent = YGJustifyCenter;
layout.alignItems = YGAlignStretch;
}];
UIScrollView *scrollView = [[UIScrollView alloc] init] ;
scrollView.backgroundColor = [UIColor grayColor];
[scrollView configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.flexDirection = YGFlexDirectionColumn;
layout.height =500;
}];
[self addSubview:scrollView];
UIView *contentView = [UIView new];
[contentView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
layout.isEnabled = YES;
}];
for ( int i = 1 ; i <= 20 ; ++i )
{
UIView *item = [UIView new];
item.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
saturation:( arc4random() % 128 / 256.0 ) + 0.5
brightness:( arc4random() % 128 / 256.0 ) + 0.5
alpha:1];
[item configureLayoutWithBlock:^(YGLayout *layout) {
layout.isEnabled = YES;
layout.height = 20*i;
layout.width = 100;
layout.marginLeft = 10;
}];
[contentView addSubview:item];
}
[scrollView addSubview:contentView];
[scrollView.yoga applyLayoutPreservingOrigin:YES];
scrollView.contentSize = contentView.bounds.size;
複製程式碼效果如下:
佈置 UIScrollView 主要是使用了一箇中間 contentView,起到了計算 scrollview 的 contentSize 的作用。這裡要注意的是，要在scrollview呼叫完 applyLayoutPreservingOrigin: 後進行設定,否則得不到結果。
UIScrollView 的用法，目前在網上也沒找到比較官方的示例，完全是筆者自己摸索的，歡迎知道的大佬指教。
上面所用的示例程式碼，已經上傳至 GitHub
總結
FlexBox 的確是一個非常適用於移動端的佈局方式，語意清晰，效能穩定，現在移動端 UI 檢視越來越複雜，尤其是在所有瀏覽器都已經支援了 FlexBox 之後，作為移動開發者有必要了解新的解決方式。
大家在熟練使用 YogaKit 的方式之後，也可以嘗試自己封裝一套佈局程式碼，加快開發效率。