入門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 像素。