react-native 佈局篇之flexbox

FlexBox佈局

直接閱讀大神文章：阮一峯寫的FlexBox佈局。在react-native中原理是同樣的，只不過可能有寫屬性在react-native中簡化了。
有幾個注意的點，我在剛剛開始flexbox中總結的：

容器(container)屬性

• flexDirection ，justifyContent，alignItems

  • flexDirection flex佈局方式

  • justifyContent 主軸對齊方式

  • alignItems 交叉軸對齊方式
    這裏須要特別注意的就是主軸和交叉軸。如下舉具體示例說明：

flexDirection:'column'（默認值），垂直居中對齊：justifyContent:'center',水平居中對齊：alignItems:'center'
flexDirection:'row'，垂直居中對齊：alignItems:'center'，水平居中對齊：justifyContent:'center'

項目(item)屬性

• flex

  • 爲何設置flex:1佔滿整個容器
    不少時候咱們常常直接寫flex:1佔滿整個容器，那爲何寫flex:1,不寫flex:2或者flex:3呢？首先咱們要了解flex屬性是比例值，假設如今有兩個項目，分別設置屬性flex:1,flex:2,那麼第一項就佔據整個容器的1/3,第二項佔據整個容器2/3。這下知道爲何flex:1佔滿整個容器了吧，由於是1/1。因此若是容器只有一個項目那麼flex:1,flex:2,flex:3都是佔滿整個容器，由於分別的意思是：1/1,2/2,3/3。

  • 特別注意flex:1的做用對象是主軸
    在flexDirection:'row'中設置flex:1,是水平方向上佔滿整個容器。在flexDirection:'column'中設置flex:1,是垂直方向上佔滿整個容器。