（1）兼容性
Chrome 21+
Opera 12.1+
Firefox 22+
Safari 6.1+
IE 10+
（2）弹性盒
容器设置：
display:flex;
display:inline-flex;
（3）容器属性
主轴方向：
flex-direction:row|row-reverse|column|column-reverse;
row：默认值，主轴为水平方向，从左到右
row-reverse：主轴为水平方向，从右到左
column：主轴为垂直方向，从上到下
column-reverse：主轴为垂直方向，从下到上
注：
与主轴（main axis）垂直的方向成为交叉轴（cross axis）
以下假设flex-direction:row;
item的换行方式：
flex-wrap:nowrap|wrap|wrap-reverse;
nowrap：默认值，item不换行
wrap：换行，向下换行
wrap-reverse：向上换行
item左右的堆积方式：
justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start：默认值，item左对齐
flex-end：item右对齐
center：item左右居中
space-between：item两端对齐，item间隔相等
space-around：每个item两侧间隔相等
item的上下对齐方式：
align-items:stretch|flex-start|flex-end|center|baseline;
stretch：默认值，没有设置高度的item，将拉伸到容器高度（宽度）
flex-start：item上对齐
flex-end：item下对齐
center：item上下居中
baseline：item第一行文字的基线对齐
多根主轴的分布方式：
align-content:stretch|flex-start|flex-end|center|space-between|space-around;
stretch：默认值，每根主轴加起来占满高度（宽度）
flex-start：axis上对齐
flex-end：axis下对齐
center：axis上下居中
space-between：axis两端对齐，axis间隔相等
space-around：每两个axis上下间距相等
（4）item属性
顺序：数值越小排列越靠前，默认值为0
order:0|<integer>;
相对扩大比例：默认值为0，原始大小。如果每个都为1，则平分。如果有一个是2，则它是其他的2倍。
flex-grow:0|<number>;
相对缩小比例：默认值为1，如果空间不足，等比缩小。如果有一个0，则它不变，其他等比缩小。
flex-shrink:1|<number>;
原始大小：item原始占据的主轴宽度，浏览器根据它计算是否有多余空间，默认值为auto，即项目本来的大小。
flex-basis:auto|<length>;
单独设置交叉方向的对齐方式：覆盖align-item属性
align-self:auto|flex-start|flex-end|center|baseline|stretch;
