Flexbox布局
flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素 任何一个元素可以指定flexbox布局，设为display:flex或display:inline-flex。
更好理解伸缩流，看下图
主轴既可以是水平轴，也可以是垂直轴,项目默认沿主轴排列,还是看图比较明了。
浏览器支持属性有
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
指定元素是否为伸缩容器
display:flex |inline-flex
注意设为flex布局后，子元素的float、clear和vertical-align属性失效(vertical-align设置元素的垂直对齐方式)
指定主轴的方向
flex-direction:row|row-reverse| column | column-reverse
row(默认值)：伸缩容器若为水平方向轴，伸缩项目的排版方式为从左到右排列。
row-reverse：伸缩容器若为水平方向轴，伸缩项目排版方式为从右到左排列。
column：伸缩容器若为垂直方向轴，伸缩项目的排版方式为从上到下排列。
column-reverse：伸缩容器若为垂直方向轴，伸缩项目的排版方式为从下到上排列。
指定主轴方向空间不足时，是否换行及该如何换行
flex-wrap:nowrap |wrap|wrap-reverse
nowrap：即使空间不足，伸缩容器也不允许换行。
wrap：空间不足时，允许换行，若主轴为水平轴，则换行方向为从上到下。
wrap-reverse：空间不足时，允许换行，若主轴为水平轴，则换行方向为从下到上（与wrap时候相反）。
flex-flow:flex-directionflex-wrap
此属性是flex-direction和flex-wrap的缩写版本
指定沿主轴线的对齐方式
justify-content:flex-start | flex-end| center |space-between|space-around
flex-start：向主轴线的其实位置靠齐（默认值）
flex-end：向主轴线的结束位置靠齐
center：向主轴线的中心位置靠齐
space-between：平均分布在主轴线里，第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的结束位置
space-around：伸缩项目平均分布在主轴线里，两端保留一半的空间
指定伸缩项目在侧轴方向上的对齐方式
align-items:flex-start |flex-end|center|baseline|stretch
flex-start：向侧轴的起始位置靠齐
flex-end：向侧轴的结束位置靠齐
center：向侧轴的中心位置靠齐
baseline：如伸缩项目的行内轴与侧轴为同一条，则该值与"flex-start"等效，其他情况，该值参与基线对齐
stretch：向侧轴方向拉伸填充整个容器
伸缩项目出现换行后在侧轴方向上的对齐方式，要换行必须要有flex-wrap:wrap,其实意思就是换行后每行之间的对齐方式
align-content:flex-start |flex-end|center|space-between |space-around |stretch
flex-start：向侧轴的起始位置靠齐
flex-end：向侧轴的结束位置靠齐
center：向侧轴的中心位置靠齐
space-between：在侧轴中平均分布
space-around：在侧轴中平均分布，且在两边各有一半的空间
stretch：在侧轴上伸展以占用剩余的空间
伸缩项目支持属性有
order
flex-grow
flex-shrink
flex-basis
flex
align-self 3e
这个属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0
order:integer
定义伸缩项目的放大比例，默认值为0，即若存在剩余空间，也不放大。比如所有伸缩项目的flex-grow为1，那么每个伸缩项目将设置为一个大小相等的剩余空间；如果你将其中一个伸缩项目的flex-grow设置为2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的2倍。
flex-grow:number
定义伸缩项目的收缩能力,即如果空间不足，该项目将缩小
flex-shrink:number//默认值为1
如果所有项目的flex-shrink的值都为1，当空间不足时，都将等比例缩小，如果一个项目的flex-shrink的值为0，其他项目为1，当空间不足时，前者不缩小。
设置伸缩项目的基准值，剩余的空间按比率进行伸缩
flex-basis:length| auto
flex是flex-grow、flex-shrink和flex-basis这三个的缩写
flex:none | flex-grow flex-shrink flex-basis/*
flex-shrink和flex-basis是可选参数
*/
此处如果flex值为1,相当于flex-grow值为1，该元素把伸缩容器的剩余空间占满。
设置单个的伸缩项目在侧轴上的对齐方式，可以覆盖align-items属性，默认值为auto
align-self:auto|flex-start |flex-end|center|baseline|stretch
auto是继承父元素的align-items属性，如果没有父元素，则按照stretch来计算其值，其他的同align-items。
接下来总结一下下react-native中flexbox的使用，在react-native中flexDirection、alignItems和justifyContent可以满足大多数布局需求。
alignItems
alignSelf
flex
flexDirection
flexWrap
justifyContent
用法同前面说的align-items，区别在与react-native中需要使用驼峰写法
alignItems:flex-start |flex-end|center|stretch
用法同前面说的align-self，区别在与react-native中需要使用驼峰写法
alignSelf:auto|flex-start |flex-end|center|stretch
用法同前面说的flex
flex：number
用法同前面说的flex-direciton，但react-native中默认是column
flexDirection:row|column
用法同前面说的flex-wrap，区别在与react-native中需要使用驼峰写法
flexWrap:wrap| nowrap
用法同前面说的justifyContent，区别在与react-native中需要使用驼峰写法
justifyContent: flex-start | flex-end| center |space-between|space-around
哈哈哈😆！！！
