2.2.6.1.2 Flex组件

为了使用更方便，布局代码更简洁更语义化，平台提供了Flex组件，对Flexbox进行了封装。

引用方式

import {Flex} from “primeton-mobile”

属性说明

Flex组件提供32个布局属性，属性规则：属性两字母或者三字母组成。

• h: horizontal,容器内的子组件水平排列
• v: vertical，容器内的子组件垂直排列
• r: right, 容器内的子组件水平靠右对齐
• c: center, 容器内的子组件水平居中对齐
• l: left, 容器内的子组件水平靠左对齐
• t: top, 容器内的子组件垂直靠上对齐
• m: middle, 容器内的子组垂直件居中对齐
• b: bottom, 容器内的子组件垂直靠下对齐

示例：

View内的子组件将横向排列，上下居中，左右居中。

<View style={[Flex.vr]}> 
// 垂直排列，右对齐
</View>
<View style={[Flex.vb]}> 
// 垂直排列，下对齐
</View>
<View style={[Flex.hmc]}> 
// 水平排列，居中布局
</View>
<View style={[Flex.vrb]}> 
// 垂直排列，右下方布局
</View>

如上述示例所示，Flex 布局的第一位必须是指定排列表方式：h或者v；第二位可以设置水平方向和垂直方向的排列方式；但是既需要设置水平方向布局又需要设置垂直方向布局时，第二位必须为水平排列，第三位为垂直排列

水平排列布局参考：

垂直排列布局参考：