ReactNative开发——flexbox布局

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	上空隙宽度