弹性布局

也是css3的内容，所以得加-webkit

把一个容器指定为flex布局，

.box{

display:flex;

}

设为flex布局后，float，clear，vertical-align属性失效。

属性

1、justify-content：

定义了项目在主轴（x轴）上的对齐方式。

值：flex-start  左对齐 （默认值）

flex-end  右对齐

center  居中

space-between  两边对齐，项目之间间隔相等

space-around  每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。

2、align-items：

在交叉轴（y轴）上的对齐方式。

值：flex-start  y轴的起点对齐

flex-end  y轴的终点对齐

center  中点对齐

Baseline  与项目第一行的基准线对齐。

Strech （默认值），如果项目未设置高度或设为auto，将占满整个容器的高度。

3、flex-direction：

决定主轴的方向。

值：row  行排 起点：左端  （默认）

column 列排  起点：右端

row-reverse：水平  右端

column  主轴为垂直方向，起点在上沿

column-reverse  垂直方向，起点在下沿

4、flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

5、order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order的值是一个具体的数值（可为负）

6、align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;