入坑 React Native 之FlexBox布局

FlexBox布局也叫弹性盒子,弹性布局.是CSS3为我们提供了一种可伸缩的灵活的页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局.

常用属性#####

flex: 子组件占据父组件的比例值 
flexDirection:布局主轴方向
alignItems,justifyContent:所有子组件竖直水平方向上的对齐方式,根据主轴方向来定
alignSelf:单个子组件对其方式
flexWrap:空间不够时换行使用(nowrap,wrap)

1.flex属性

定义四个View,外部容器为superView

父组件中的flex属性使,外部容器充满窗口,子组件的flex属性使每个子组件在父组件里占据一定比例显示

定义样式

显示结果

修改子组件flex值后

child3,child4 flex值改为2

2.flexDirection主轴方向(row：横向布局. column：纵向布局.)父组件设置

flexDirection:'row'

显示结果

3.alignItems所有子组件的对其方式(flex-start,flex-end,center,stretch) 属性在父组件的样式中设置.

alignItems : 'flex-start'

flex-start

alignItems : 'flex-end'

flex-end

alignItems : 'center'

center

4.alignSelf:单个子组件对其方式,父组件中已经定义了一个对齐方式,要改变某个子组件的对其方式

父组件 alignItems : 'center'
某个子组件 alignSelf:'flex-start'

单个子组件对其方式改变

5.flexWrap不懂长度子组件排列时,空间不够用自动换行

• flexWrap:'wrap'*

  
  
  

  wrap