CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，被成为弹性布局（或者伸缩布局）。相比之前的布局方式有很大的灵活性，尤其是之前垂直居中时的设置问题等。
最早的布局方式才用设置position和 float以及inlineheight等，相对麻烦，下面简要说明下flexbox布局常用属性。如果在css开发时使用Flexbox布局需要设置样式display:flex, 或者 display:inline-flex
reactnative默认支持Flexbox布局方式，在使用Flexbox布局之前，我们首先要了解几个概念。
1.伸缩项目：伸缩容器的子元素
2.主轴：沿着某个方向配置伸缩项目的元素，默认在PC端和移动端主轴方向为向下
3.侧轴：与主轴相对的轴
下图是一个row伸缩容器中各种方向与大小术语的示意图：
Flexbox——快速布局神器
上图以及术语介绍来自于：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans
常用Flexbox属性介绍:
flex-direction属性决定主轴的方向: row | row-reverse | column | column-reverse, 但是在react中只支持row | column
row：主轴为水平方向，起点在左端。
column：主轴为垂直方向，起点在上沿。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap属性，即在某条轴线上排列不下时需要换行的方式。有四个值:nowrap | wrap | wrap-reverse; reactNative中常用的有nowrap和wrap等
nowrap（默认）：不换行
wrap：换行，第一行在下方
wrap-reverse：换行，第一行在上方
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性:主轴上的对齐属性
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content.png
align-items属性定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
align-items.png
align-self:项目子元素的自身的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
网友评论