Flex布局

Flex Container

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

• Flex Direction决定了Flex Containner内的主轴排布方向。

主轴默认为 Row (从左到右):
同时，也可以设置 RowRevers(从右至左):
Column(从上到下):
ColumnRevers(从下到上):

• Flex Wrap

Flex Wrap 决定在轴线上排列不下时，视图的换行方式。
Flex Wrap 默认设置为 NoWrap，不会换行，一直沿着主轴排列到屏幕之外:

• Display

Display 选择是否计算它，默认为 Flex. 如果设置为 None 自动忽略该视图的计算。

在根据逻辑显示 UI 时，比较有用。

比如我们现有的业务，需要显示的腾讯身份标示。按照一般做法，多个 icon 互相连成一排，根据身份去设置不同的距离，同时隐藏其他 icon ,比较的麻烦。iOS 最好的办法是使用 UIStackView ，这又有版本兼容等问题。而使用 FlexBox 布局,当不是某个身份时，只要设置 Display 为 None,就不会被纳入 UI 计算当中。

• Justify Content

Justify Content用于定义Flex Item在主轴上的对齐方式:FlexStart(主轴起点对齐)，FlexEnd(主轴终点对齐)，Center(居中对齐)、SpaceBetween（两端对齐）。。。。

• Align Items

Align Items定义Flex Item在侧轴上的对齐方式。

Align Items可以和主轴对齐方式Justify Content一样,设置FlexStart ,FlexEnd,Center,SpaceBetween,SpaceAround 。