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
