FlexLib 是一个强大且灵活的 Objective-C 布局库，基于 Facebook 的 Yoga 引擎构建，支持 Flexbox 布局模型。它可以帮助开发者更方便地构建复杂的 UI 布局。
下面列举了一些常用的 API 及其注释，以帮助你更好地理解和使用 FlexLib。
常用 API 列表
布局方向和换行
-
flexDirection(FlexDirection)：设置主轴方向。FlexDirectionRow：主轴为水平方向。FlexDirectionColumn：主轴为垂直方向。FlexDirectionRowReverse：主轴为水平方向，起点为右端。FlexDirectionColumnReverse：主轴为垂直方向，起点为底端。
-
flexWrap(FlexWrap)：设置是否换行。FlexWrapNoWrap：不换行。FlexWrapWrap：换行，第一行在上。FlexWrapWrapReverse：换行，第一行在下。
对齐方式
-
justifyContent(FlexJustify)：设置主轴对齐方式。FlexJustifyStart：从主轴起点对齐。FlexJustifyCenter：居中对齐。FlexJustifyEnd：从主轴终点对齐。FlexJustifySpaceBetween：两端对齐，项目之间间隔相等。FlexJustifySpaceAround：每个项目两侧间隔相等。
-
alignItems(FlexAlign)：设置交叉轴对齐方式。FlexAlignStretch：拉伸到容器的高度。FlexAlignStart：从交叉轴起点对齐。FlexAlignCenter：沿交叉轴居中对齐。FlexAlignEnd：从交叉轴终点对齐。FlexAlignBaseline：基线对齐。
-
alignSelf(FlexAlign)：设置单个项目沿交叉轴的对齐方式，覆盖alignItems。- 参数同
alignItems。
- 参数同
-
alignContent(FlexAlign)：设置多根轴线的对齐方式。- 参数同
alignItems。
- 参数同
子视图属性
flexGrow(CGFloat)：设置项目的放大比例。flexShrink(CGFloat)：设置项目的缩小比例。flexBasis(CGFloat)：设置项目的基准值。flexSize(CGSize)：设置项目的大小。margin(CGFloat)：设置项目的外边距。padding(CGFloat)：设置项目的内边距。
其他
flex_addSubview(UIView *)：向视图添加子视图。flex_layout：计算并应用布局。
示例
下面是一些示例代码，展示如何使用这些 API：
objc
UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow; // 设置主轴为水平方向
containerView.flexWrap = FlexWrapWrap; // 设置自动换行
UIView *subview1 = [UIView new];
subview1.flexSize(CGSizeMake(50, 50)).margin(10); // 设置子视图大小和外边距
UIView *subview2 = [UIView new];
subview2.flexSize(CGSizeMake(50, 50)).margin(10); // 设置子视图大小和外边距
[containerView flex_addSubview:subview1];
[containerView flex_addSubview:subview2];
// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];下面是一些常用和稍微复杂的使用示例，以帮助你更好地理解 FlexLib 的功能和用法。
常用示例
示例 1：简单的水平和垂直布局
这是一个常见的水平和垂直布局示例，包含两个子视图。
objc
UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow; // 设置为水平布局
[containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);
[containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);
// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];示例 2：自动换行的水平布局
当子视图超出父视图宽度时，自动换行。
objc
UIView *containerView = [UIView new];
containerView.flexDirection = FlexDirectionRow;
containerView.flexWrap = FlexWrapWrap; // 启用换行
for (int i = 0; i < 10; i++) {
[containerView flex_addSubview:[[UIView alloc] init]].flexSize(CGSizeMake(50, 50)).margin(10);
}
// 添加到父视图并设置约束
[self.view addSubview:containerView];
containerView.frame = self.view.bounds;
[containerView flex_layout];复杂示例
示例 3：嵌套布局
这是一个稍微复杂的示例，展示了嵌套布局的使用。
objc
UIView *rootView = [UIView new];
rootView.flexDirection = FlexDirectionColumn; // 主轴为垂直方向
UIView *headerView = [UIView new];
headerView.flexSize(CGSizeMake(FLEX_AUTO, 60)).backgroundColor([UIColor redColor]);
UIView *bodyView = [UIView new];
bodyView.flexDirection = FlexDirectionRow; // 主轴为水平方向
bodyView.flexGrow(1).backgroundColor([UIColor greenColor]);
// 左侧视图
UIView *leftView = [UIView new];
leftView.flexSize(CGSizeMake(100, FLEX_AUTO)).backgroundColor([UIColor blueColor]);
[bodyView flex_addSubview:leftView];
// 主内容视图
UIView *mainContentView = [UIView new];
mainContentView.flexGrow(1).backgroundColor([UIColor yellowColor]);
[bodyView flex_addSubview:mainContentView];
// 添加子视图到根视图
[rootView flex_addSubview:headerView];
[rootView flex_addSubview:bodyView];
// 添加到父视图并设置约束
[self.view addSubview:rootView];
rootView.frame = self.view.bounds;
[rootView flex_layout];示例 4：复杂的表单布局
这里是一个复杂的表单布局示例，包括标签和输入框。
objc
UIView *formView = [UIView new];
formView.flexDirection = FlexDirectionColumn;
formView.padding(20);
NSArray *fields = @[@"Name", @"Email", @"Phone"];
for (NSString *field in fields) {
UIView *fieldContainer = [UIView new];
fieldContainer.flexDirection = FlexDirectionRow;
fieldContainer.marginBottom(10);
UILabel *label = [UILabel new];
label.text = field;
label.flexSize(CGSizeMake(80, FLEX_AUTO));
UITextField *textField = [UITextField new];
textField.borderStyle = UITextBorderStyleRoundedRect;
textField.flexGrow(1);
[fieldContainer flex_addSubview:label];
[fieldContainer flex_addSubview:textField];
[formView flex_addSubview:fieldContainer];
}
// Submit 按钮
UIButton *submitButton = [UIButton buttonWithType:UIButtonTypeSystem];
[submitButton setTitle:@"Submit" forState:UIControlStateNormal];
submitButton.flexMarginTop(20).alignSelf(FlexAlignCenter);
[formView flex_addSubview:submitButton];
// 添加到父视图并设置约束
[self.view addSubview:formView];
formView.frame = self.view.bounds;
[formView flex_layout];结论
FlexLib 提供了一种基于 Flexbox 的布局方式，可以方便地实现响应式和复杂的 UI 布局。无论是简单的水平、垂直布局，还是复杂的嵌套和表单布局，FlexLib 都能高效地完成任务。通过学习这些示例，你可以更好地理解和应用这个强大的布局库。在实际项目中，根据需求调整布局参数，能实现更符合设计要求的 UI 界面。