弹性布局

任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。Webkit内核的浏览器，必须加上-webkit前缀

容器默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。项目默认沿主轴排列。

flex有六个属性，分别为flex-direction，flex-wrap， flex-flow ，justify-content， aligh-items， align-content。

flex-direction属性决定主轴方向：

1. row默认值，从左往右排
2. column从上往下排
3. column-reverse从下往上排

flex-wrap属性

1. nowrap默认值，不换行
2. wrap换行，第一行在上方
3. wrap-reverse 换行，第一行在下方

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap

justify-content属性定义了项目在主轴上的对齐方式

1. flex-start（默认值）：左对齐
2. flex-end:右对齐
3. center:居中
4. space-between:两端对齐，项目之间的间隔都相等
5. space-around:每个项目两侧相等，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐

1. flex-start:交叉轴的起点对齐
2. flex-end:交叉轴的终点对齐
3. center：交叉轴的终点对齐
4. baseline：项目的第一行文字的基线对齐
5. stretch（默认值）：如果项目未设置高度或设为auto，讲占满整个容器的高度