iOS 使用flexBox

#flex布局

Yogakit

https://github.com/facebook/yoga/tree/master/YogaKit

Yoga is a cross-platform layout engine which implements Flexbox.

YogaKit is used for iOS.

Yogakit Properties

容器默认存在两根轴：主轴和交叉轴 主轴方向由Flex Direction决定，Flex Direction = row 代表水平方向为主轴，Flex Direction = column 代表 垂直方向为交叉轴。

Flex Direction

1.row: 水平正向排列

2.row-reverse:水平逆向排列

3.column:垂直正向排列

4.column-reverse:垂直逆向排列

Flex Wrap

是否换行

1.no wrap ：不换行，此时如果控件超出空间，则根据FlexShrink来计算缩放.

2.wrap : 控件超出空间是换行。

Justify Content

主轴上的对齐方式

1.flex start:起点对齐

2.center:中间对齐

3.flex end:终点对齐

4.space between:控件间等距对齐

5.space around:控件两侧边距相同， 边距 = 控件间距 / 2

6.space evenly:所有间距相同，边距 = 控件间距

Align Items

交叉轴上的对齐方式 比Justify Content多一个stretch选项，stretch是指在垂直轴上拉伸，前提是垂直轴方向的长度值为auto

Align Self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

演示

Align Content

一行：Align Items

多行：Align Content

Align Content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

Flex Basis,Grow,and Shrink

1.basis:固定主轴方向的长度,优先级高于width或height

2.grow:空间大，瓜分剩余空间，值越大，说明瓜分的剩余空间越大

3.shrink:空间不够，控件缩小规则，值越大，说明该控件压缩的空间越大

演示

Complex Layout

重叠布局

position 有两个值：.relative 相对定位 和 .absolute 绝对定位, 默认为相对定位;

绝对定位使得该视图脱离布局流,坐标系为父视图。

	[YellowView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
	            layout.isEnabled = YES;
	            layout.flexDirection = YGFlexDirectionColumn;
	            layout.justifyContent =  YGJustifyFlexStart;
	            layout.alignItems     =  YGAlignCenter;
	}];
	
	[RedView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
	            layout.isEnabled = YES;
	}];
	
	[YellowView addSubView: RedView];
	
	
	[BlueView configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
	            layout.isEnabled = YES;
	            layout.position = YGPositionTypeAbsolute;
	}];
	
	[YellowView addSubView: BlueView];

Performance

frame布局

yogalayout布局

结论

frame布局性能还是最好的，均值在1.06ms, yogalayout均值在1.20ms左右，但yogalayout布局编写简单，灵活性强(空间过大或不够的情况下)，省去了开发者的计算逻辑，开发者只需要关注边距，布局方式，控件大小即可。