[CSS] flex布局

（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;