Flex Container

它們可以是水平，也可以是垂直。

• Flex Direction決定了Flex Containner內(nèi)的主軸排布方向。

主軸默認(rèn)為 Row (從左到右):
同時，也可以設(shè)置 RowRevers(從右至左):
Column(從上到下):
ColumnRevers(從下到上):

• Flex Wrap

Flex Wrap 決定在軸線上排列不下時，視圖的換行方式。
Flex Wrap 默認(rèn)設(shè)置為 NoWrap，不會換行，一直沿著主軸排列到屏幕之外:

• Display

Display 選擇是否計(jì)算它，默認(rèn)為 Flex. 如果設(shè)置為 None 自動忽略該視圖的計(jì)算。

在根據(jù)邏輯顯示 UI 時，比較有用。

比如我們現(xiàn)有的業(yè)務(wù)，需要顯示的騰訊身份標(biāo)示。按照一般做法，多個 icon 互相連成一排，根據(jù)身份去設(shè)置不同的距離，同時隱藏其他 icon ,比較的麻煩。iOS 最好的辦法是使用 UIStackView ，這又有版本兼容等問題。而使用 FlexBox 布局,當(dāng)不是某個身份時，只要設(shè)置 Display 為 None,就不會被納入 UI 計(jì)算當(dāng)中。

• Justify Content

Justify Content用于定義Flex Item在主軸上的對齊方式:FlexStart(主軸起點(diǎn)對齊)，F(xiàn)lexEnd(主軸終點(diǎn)對齊)，Center(居中對齊)、SpaceBetween（兩端對齊）。。。。

• Align Items

Align Items定義Flex Item在側(cè)軸上的對齊方式。

Align Items可以和主軸對齊方式Justify Content一樣,設(shè)置FlexStart ,FlexEnd,Center,SpaceBetween,SpaceAround 。