React Native布局（flexbox）

React Native布局

flexbox是有伸缩容器和伸缩项目组成。任何一个元素都可以指定flexbox布局，伸缩容器的子元素可以称为伸缩项目。伸缩项目使用伸缩布局模型来排版。在默认情况下，伸缩容器有两根轴组成：主轴（main axis）和交叉轴（cross axis）,主轴开始的位置叫main stat,结束的位置叫main end。交叉轴开始的位置叫cross start，结束的位置叫cross end。伸缩项目在主轴上占的空间叫main size。在交叉轴上占据的空间叫cross size。

React Native布局

(1)flexDirection改变主轴方向

const styles = StyleSheet.create({

     container:{

             flexDirection:'row'//默认主轴水平方向

             //flexDirection:'column'  主轴纵向方向

      }

})

(2)flexWrap水平折行

const styles = StyleSheet.create({

        container:{

               flexDirection:'row', //默认主轴水平方向

               flexWrap:'wrap'      //默认nowrap 不折行

      }

})

(3)justifyContent定义伸缩项目沿主轴线对齐方式

const styles = StyleSheet.create({

     container:{

           flexDirection:'row', //默认主轴水平方向

            justifyContent:'flex-start'  //从左向右排列

           //justifyContent:'flex-end'   //从右向左排列

          //justifyContent:'center'   //主轴线中心排列

         //justifyContent:'space-between'  //从主轴线两边开始排列

        //justifyContent:'space-around'   //均分排列

    }

})

(4)alignItems定义交叉轴关系

const styles = StyleSheet.create({

    container:{

         flexDirection:'column',  主轴纵向方向

         alignItems:'flex-start' //默认交叉轴左边对齐

         //alignItems:'flex-end' //交叉轴右边对齐

        // alignItems:'center' //交叉轴中心对齐

        // alignItems:'streach' //没有明显效果

  }

})

(5)flex（数值型属性值）用于收缩项目尽可能向右扩展

   style={flex:1}