React Native中支持的flexbox屬性
justifyContent : 定義伸縮項目沿主軸線上的對齊方式。
flex-start:
flex-end:
center:
space-between: 根據屬性值的字面意思,剩餘的空間留在伸縮項目之間,而且是平均分配,第一個伸縮項目在主軸線的開始位置和main start沒有間隙,最後一個伸縮項目在主軸線的結束位置和main end沒有間隙。
space-around:根據屬性值的字面意思也很好理解,剩餘的空間環繞着伸縮項目,伸縮項目之間平均分配剩餘空間,兩端伸縮項目距離主軸線的main start和main end,保留一半的空間。alignItems: 定義伸縮項目在伸縮容器的交叉軸上的對齊方式。
flex-start:
flex-end:
center:
baseline: 單詞的解釋是基準線,在交叉軸方向沿基準線中心對齊(這塊理解的不好)。
stretch:伸展,伸縮項目在交叉軸方向拉伸填充整個伸縮容器。(想看到這個屬性值的效果,伸縮項目不能設置交叉軸上的長度)。- flexDirection:指定主軸的方向,與LinearLayout中的android:orientation屬性相似。
- flex: 此屬性,由三個屬性構成,flex-grow定義了方法比例,flex-shrink定義了縮小比例,flex-basis定義了指定大小,語法:flex:flex-grow flex-shrink flex-basis。如flex:1 ,填充滿伸縮容器剩餘的空間,很類似於android:weight 屬性,即權重,如果希望幾個View平均分配整個屏幕寬,可以設置每個item的view的flex爲1。
- position:“relative”和 “absolute”
- borderRadius : 設置View圓角大小,相當於Android中的CardView能力,超讚。
注:justifyContent和alignItems可以定義控件中文字內容的顯示位置,等同於我們在Android Native開發中LinearLayout的android:gravity屬性的效果。