React Native 之 flexbox佈局

React Native中支持的flexbox屬性

1. justifyContent : 定義伸縮項目沿主軸線上的對齊方式。

   flex-start：
   flex-end：
   center：
   space-between: 根據屬性值的字面意思，剩餘的空間留在伸縮項目之間，而且是平均分配，第一個伸縮項目在主軸線的開始位置和main start沒有間隙，最後一個伸縮項目在主軸線的結束位置和main end沒有間隙。
   space-around：根據屬性值的字面意思也很好理解，剩餘的空間環繞着伸縮項目，伸縮項目之間平均分配剩餘空間，兩端伸縮項目距離主軸線的main start和main end，保留一半的空間。

2. alignItems： 定義伸縮項目在伸縮容器的交叉軸上的對齊方式。
   flex-start：
   flex-end：
   center：
   baseline： 單詞的解釋是基準線，在交叉軸方向沿基準線中心對齊（這塊理解的不好）。
   stretch：伸展，伸縮項目在交叉軸方向拉伸填充整個伸縮容器。（想看到這個屬性值的效果，伸縮項目不能設置交叉軸上的長度）。

3. flexDirection：指定主軸的方向，與LinearLayout中的android:orientation屬性相似。
4. flex： 此屬性，由三個屬性構成，flex-grow定義了方法比例，flex-shrink定義了縮小比例，flex-basis定義了指定大小，語法：flex：flex-grow flex-shrink flex-basis。如flex：1 ，填充滿伸縮容器剩餘的空間，很類似於android:weight 屬性，即權重，如果希望幾個View平均分配整個屏幕寬，可以設置每個item的view的flex爲1。
5. position：“relative”和 “absolute”
6. borderRadius : 設置View圓角大小，相當於Android中的CardView能力，超讚。

注：justifyContent和alignItems可以定義控件中文字內容的顯示位置，等同於我們在Android Native開發中LinearLayout的android:gravity屬性的效果。