版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a992036795/article/details/72845677
ReactNative开发——flexbox布局
flexbox（弹性盒）是W3C提出的UI设计模型规范的一种实现，有布局神器的美誉。ReactNative实现了其中的大部分功能。
位置及宽高样式键
| 键 |
取值 |
| position |
它的取值是字符串类型，取值可以是releative（默认）或者absolute，表示当前描述的位置是相对定位还是绝对定位 |
| top |
数值类型，当position为absolute时，表示组件距离父组件最上沿多少ptx显示，当position为releative时表示距离上一个同级组件的最上沿多少pt |
| left |
数值类型，当position为absolute时，表示组件距离父组件最左沿多少pt显示,当position为releative时表示距离上一个同级组件的最左沿有多少pt |
| bottom |
数值类型，当position为absolute，表示距离父组件的最下沿多少pt显示，当position为releative时不可用 |
| right |
数值类型，当position为absolute,表示距离父组件的最右沿多少pt显示，当position为releative时不可用 |
| width |
数值类型，表示宽 |
| height |
数值类型，表示高 |
| minHeight,maxHeight |
数值类型，表示高度的最小值与最大值 |
| minWidth,maxWidth |
数值类型，表示宽度的最小值与最大值 |
决子组件排列规则的键
| 键 |
取值 |
| flexDirection |
flexDirection键决定了组件内部的子组件式如何排列的，它的取值可以为row、colum。row代表横向排列，colum表示纵向排列 |
| flexWrap |
它可以取2个字符串中的一个[‘wrap’,’nowrap’],默认值是nowrap,表示不会自动换行（换列） |
| justifyContent |
justifyContent键用来定义在一个方向上如何排列子组件，他有5中可能的字符串类型值：flex-start,flex-end,center,space-between,space-aroud |
| alignItems |
alignItems键定义了View组件中的所有子组件的对齐规则，他有4中可能的字符串类型值：flext-start,flext-end ,center,stretch |
决定子组件显示规则的键
| 键 |
取值 |
| flex |
当他的值为1时，子组件将自动缩放适应父组件留下的空白空间，开发者使用flex时，要格外的小心，它的自动缩放意味着不仅可以改变自己的宽、高与位置，还可以改变与它同级的其他组件的位置 |
| alignSelf |
alignSelf键有5种可能的字符串类型值:auto，flex-start,flex-end,center,stretch。其用途是让组件忽略它的父组件样式中alignItems键的取值，当取值为auto时，表示使用父View组件的alignItems值，其他4个值的含义与alignItems中对应的值含义相同 |
边框、空隙与填充
我们可以指定一个组件的边框（border）、空隙（margin)和填充（padding)的各种属性（如果支持的话）。
| 键 |
取值 |
| borderWidth |
表示边框的宽度 |
| borderTopWidth |
表示边框的顶部宽度 |
| borderRightWidth |
边框的右边宽度 |
| borderBottomWidth |
边框的底部宽度 |
| borderLeftWidth |
边框的左边宽度 |
| padding |
填充宽度 |
| paddingHorizontal |
左右填充宽度 |
| paddingVertical |
上下填充宽度 |
| paddingBottom |
下填充宽度 |
| paddingLeft |
左填充宽度 |
| paddingRight |
右填充宽度 |
| paddingTop |
上填充宽度 |
| margin |
空隙宽度 |
| marginHorizontal |
左右空隙宽度 |
| marginVertiacl |
上下空隙宽度 |
| marginBottom |
下空隙宽度 |
| marginLeft |
左空隙宽度 |
| marginRight |
右空隙宽度 |
| marginTop |
上空隙宽度 |