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占滿整個容器
    很多時候我們經(jīng)常直接寫flex:1占滿整個容器，那為什么寫flex:1,不寫flex:2或者flex:3呢？首先我們要了解flex屬性是比例值，假設現(xiàn)在有兩個項目，分別設置屬性flex:1,flex:2,那么第一項就占據(jù)整個容器的1/3,第二項占據(jù)整個容器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,是垂直方向上占滿整個容器。