入门react-native——flex布局

一、flex属性:
    1.1、flex父视图属性                            
   1.1.1、flexDirection:
   定义View的主轴方向，在这个View下面的子元素会沿着主轴方向排列，可选方式:
   row: 从左向右依次排列
  row-reverse: 从右向左依次排列
  column(default): 默认的排列方式，从上向下排列
  column-reverse: 从下向上排列
   使用例子:
   <View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
    <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>1</Text>
  </View>
   1.1.2、 flexWrap:
    定义了子元素在父视图内是否允许多行排列
    nowrap:  flex的元素只排列在一行上，可能导致溢出
    wrap flex: 元素在一行排列不下时，就进行多行排列
    使用例子:
    <View          style={ {flexWrap:'wrap',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>
  1.1.3、  justifyContent:
    浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间
    flex-start(default): 内容从行首位置开始
    flex-end: 内容从行尾位置开始
    center: 内容居中对齐
    space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐
    space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
   1.1.4 alignItems:
    与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
    flex-start 元素向侧轴起点对齐。
    flex-end 元素向侧轴终点对齐。
    center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
    stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
    1.2、子视图属性
    1.2.1、alignSelf  
   alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。
    auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch    元素被拉伸以适应容器。
center    元素位于容器的中心。
flex-start    元素位于容器的开头。
flex-end    元素位于容器的结尾。
    使用例子:
    <View style={ {alignSelf:'baseline',width:60,height:    20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>
    1.2..2、flex
   flex 属性定义了一个可伸缩元素的能力，默认为0 
   <View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
  <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:1</Text>
  </View>
  <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:2</Text>
  </View>
  <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:3</Text>
  </View>          
</View>
 1.3、reactnative内的其它布局
 1.3.3、视图边框
 borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 个方向边框的颜色
borderColor 边框颜色
1.3.4、 尺寸
width number
height number
1.3.5、外边距
margin number 外边距
marginBottom number 下外边距
marginHorizontal number 左右外边距
marginLeft number 左外边距
marginRight number 右外边距
marginTop number 上外边距
marginVertical number 上下外边距
1.3.6、内边距
内边距
padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 做内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距
1.3.7、边缘
left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移
1.3.8、定位
absolute：生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。