标签： css flex
摘自： React Native入门与实战
flexbox 即由伸缩容器和伸缩项目组成，按伸缩刘的方向布局。容器分为主轴（main axis）和交叉轴（cross axis）。务必了解属性作用于容器还是项目！
1. 容器属性
1.1 display
指定容器是否伸缩容器
display: flex | inline-flex
flex产生块级伸缩容器，inline-flex产生行内伸缩元素
eg：
<span class="flex-container">客官，请留步</span>
.flex-container {
display: flex | flex-inline
}
注意事项：
css的cloumns，float，clear，vertical-algin不会生效
1.2 flex-direction
flex-direction: row | row-reverse | column | column-reverse
row
eg:
<span class="flex-container">
<span class="flex-item">1</span>
<span class="flex-item">2</span>
<span class="flex-item">3</span>
</span>
.flex-container {
display: flex;
flex-direction: row;
}
说明：
flex-direction默认为row，因此如果要求横向收缩，你设置为display：flex后flex-direction: row可以省略
