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,是垂直方向上占满整个容器。