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 。