通用布局样式
所有视图组件都支持以下通用布局样式规则，包括 Flexbox 样式、盒模型样式。
Flexbox 样式
| 属性名 | 类型 | 默认值 | 说明 | 示例 |
|---|---|---|---|---|
| position | string | 'relative' | 布局方式，分相对布局和绝对布局，相对布局即flex布局 | position: 'relative' | 'absolute' | 'fixed' |
| flexDirection | string | 'column' | 主轴方向 | flexDirection:'column' | 'row' |
| flexWrap | string | 'nowrap' | 子控件是否折行排列 | flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse' |
| justifyContent | string | 'flex-start' | 主轴方向上的子控件排列方式 | justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' |
| alignItems | string | 'stretch' | 交叉轴方向上的子控件的对齐方式 | alignItems: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' |
| alignContent | string | 'flex-start' | 多主轴情况下，交叉轴方向上的子控件的排列方式 | alignContent: flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' |
| flexGrow | number | 0 | 子控件占有父容器剩余空间的权重 | flexGrow: 1 |
| flexShrink | number | 0 | 父容器空间不足时，子控件的收缩权重 | flexShrink: 1 |
| flexBasis | number|string | 'auto' | 子控件在进行拉伸和收缩计算前的基础尺寸 | flexBasis: 500 | 'auto' |
| alignSelf | string | 'auto' | 子控件在交叉轴上的对齐方式 | alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' |
盒模型样式
| 属性名 | 类型 | 默认值 | 说明 | 示例 |
|---|---|---|---|---|
| width | number|string | 'auto' | 宽度 | width: 10 | '10px' |
| height | number|string | 'auto' | 高度 | height: 10 | '10px' |
| minWidth | number|string | 0 | 最小宽度 | minWidth: 10 | '10px' |
| minHeight | number|string | 0 | 最小高度 | minHeight: 10 | '10px' |
| maxWidth | number|string | 最大宽度 | maxWidth: 10 | '10px' | |
| maxHeight | number|string | 最大高度 | maxHeight: 10 | '10px' | |
| margin/marginAll | number|string | 0 | 所有四个边的外边距 | margin: 10 | '10px' |
| marginLeft | number|string | 0 | 左外边距 | marginLeft: 10 | '10px' |
| marginTop | number|string | 0 | 上外边距 | marginTop: 10 | '10px' |
| marginRight | number|string | 0 | 右外边距 | marginRight: 10 | '10px' |
| marginBottom | number|string | 0 | 下外边距 | marginBottom: 10 | '10px' |
| padding/paddingAll | number|string | 0 | 所有四个边的内边距 | padding: 10 | '10px' |
| paddingLeft | number|string | 0 | 左内边距 | paddingLeft: 10 | '10px' |
| paddingTop | number|string | 0 | 上内边距 | paddingTop: 10 | '10px' |
| paddingRight | number|string | 0 | 右内边距 | paddingRight: 10 | '10px' |
| paddingBottom | number|string | 0 | 下内边距 | paddingBottom: 10 | '10px' |
| left | number|string | 0 | 距离左边的偏移量 | left: 10 | '10px' |
| top | number|string | 0 | 距离上方的偏移量 | top: 10 | '10px' |
| right | number|string | 0 | 距离右边的偏移量 | right: 10 | '10px' |
| bottom | number|string | 0 | 距离下方的偏移量 | bottom: 10 | '10px' |
| display | string | 'flex' | 控件是否显示（'none'为不显示，且不参与布局） | display: 'none' | 'flex' |
所有 长度单位 请参考：长度单位