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:垂直逆向排列
image
<div STYLE="page-break-after: always;"></div>
Flex Wrap
是否换行
1.no wrap ：不换行，此时如果控件超出空间，则根据FlexShrink来计算缩放.
2.wrap : 控件超出空间是换行。
image
<div STYLE="page-break-after: always;"></div>
Justify Content
主轴上的对齐方式
1.flex start:起点对齐
2.center:中间对齐
3.flex end:终点对齐
4.space between:控件间等距对齐
5.space around:控件两侧边距相同， 边距 = 控件间距 / 2
6.space evenly:所有间距相同，边距 = 控件间距
image
<div STYLE="page-break-after: always;"></div>
Align Items
交叉轴上的对齐方式
比Justify Content多一个stretch选项，stretch是指在垂直轴上拉伸，前提是垂直轴方向的长度值为auto
image
Align Self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
<div STYLE="page-break-after: always;"></div>
Align Content
一行：Align Items
多行：Align Content
Align Content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
image
Flex Basis,Grow,and Shrink
1.basis:固定主轴方向的长度,优先级高于width或height
2.grow:空间大，瓜分剩余空间，值越大，说明瓜分的剩余空间越大
3.shrink:空间不够，控件缩小规则，值越大，说明该控件压缩的空间越大
<div STYLE="page-break-after: always;"></div>
Complex Layout
重叠布局
image
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];
<div STYLE="page-break-after: always;"></div>
Performance
frame布局
image
yogalayout布局
image
