React Native 彈性佈局FlexBox

React Native採用一中全新的佈局方式：FlexBox（彈性佈局）。能夠很方便的實現各類複雜佈局，是全新的針對web和移動開發佈局的一種實現方式。

何爲FlexBox?

   完整名稱爲：the flexible box Module,旨在經過彈性的方式來對齊和分佈容器中的組件。Flexbuju的主要思想是：讓容器有能力讓其子項目可以改變其寬度|高度|順序，以最佳方式填充可用空間。

  在佈局中，首先得肯定主軸方向(flexDirection)，主軸組件的對齊方式（justifyContent），側軸組件的對齊方式(alignItems)，經過以上四點能夠基本肯定佈局。

FlexBox屬性：

flexDirection:該屬性肯定了主軸方向，枚舉值。

　　　　row         主軸方向爲水平，起點在左端。

　　　　row- reverse      主軸方向爲水平，起點在右端

　　　　column(默認)　　　　主軸方向爲垂直，起點在上端

　　　　column-reverse        主軸方向爲垂直，起點在下端

justifyContent:該屬性肯定了組件在主軸方向上的對齊方式，枚舉值。

　　　　flex-start(默認) 　　組件沿着主軸方向的起始位置靠齊。如：假如主軸方向是row的話就是左對齊，是row- reverse的話就是右對齊，是column的話就是上對齊，是　column-reverse的話就是下對齊。

　　　　flex-end            組件沿着主軸方向的結束位置靠齊，和flex-start相反。

　　　　space-between　　組件在主軸方向上兩端對齊，其中的間隔相等。

　　　　space-around　　　組件會平均分配在主軸方向上，兩端保留必定的位置空間。

alignItems:組件在側軸方向上的對齊方式。

　　　　flex-start         組件沿着側軸上的起點對齊

　　　　flex-end          組件沿着側軸上的終點對齊

　　　　center　　　  　組價在側軸方向上居中對齊

　　　　stretch(默認)　 組件在側軸方向上佔滿

flexWrap: 是否換行

默認狀況下，項目都排列在一條線上，放不下的部分則不放置，flexWap就是定義是否換行的。

　　　　nowrap(默認)　　　不換行

　　　　wrap            換行，第一行在上方

　　　　wrap-reverse  　　換行，第一行在下方

flex:有三個參數，默認參數爲 0 1 auto。  第一個參數爲flex-grow,第二，第三個爲:flex-shrink和flex-basis。

alignSelf:定義單個組件本身的對齊方式，默認爲auto。枚舉值：auto|flex-start|flex-end|center|baseline|stretch

position：枚舉值，absolute絕對定位，relative相對定位