flex布局

首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性：

flex-direction (元素排列方向)：

row(默认；从左往右)
row-reverse(从右往左)
column(从上往下)
column-reverse(从下往上)

flex-wrap (换行)：

 nowrap (不换行；默认),
 wrap(换行，且由上换行), 
 wrap-reverse(换行，且由下换行)

flex-flow (以上两者的简写)：flex-direction || flex-wrap

justify-content (水平对齐方式)：

flex-start(默认值): flex项目从主轴起点开始无空闲空间地排列在一起
flex-end: flex项目从主轴终点开始无空闲空间地排列在一起
center: flex项目排列在主轴中间，两边空闲空间均匀分批
space-between: 在主轴上的空闲空间均匀地分配到每两个flex项目中间
space-around: 在主轴上每个flex项目两边都分配一样的空间

align-items (垂直对齐方式)：

stretch(默认值):把所有的元素伸开，所有flex项目的高度以最高的flex项目为准
flex-start: 在主轴上排列的flex项目顶部，对齐侧轴的起点
flex-end: 在主轴上排列的flex项目底部，对齐侧轴的终点
center: 在主轴上排列的flex项目中部，对齐侧轴的中间
baseline: flex项目沿着自己的基线对齐

align-content (多行垂直对齐方式)：

stretch(默认值): flex盒子和flex项目没设置高度时，盒子高度以高度最高的flex项目为准
flex-start: 多行flex项目顶部对准侧轴起点
flex-end: 多行flex项目底部对准侧轴终点
center: 多行flex项目中部对准侧轴中间，空闲空间均匀分配打破多行flex项目两边
space-between:侧轴方向上，空闲空间均匀分配到每两行flex项目的中间
space-around: 侧轴方向上，空闲空间均匀分配到每行flex项目的两边

项目的属性：

order

order（排序） 排列顺序，数值，默认0："integer"

flex-grow

flex-grow（伸展） 定义放大比例，默认0，即如果存在剩余空间，也不放大。："number"

flex-shrikn

flex-shrikn（收缩） ，定义缩小比例，默认1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。： "number"

flex-basis

flex-basis 定义项目占据的主轴空间，默认auto。会根据flex-direction定义的主轴（水平或者垂直），定义项目本来的大小，跟width或者height一样。

flex

flex 推荐，以上三个的缩写，默认flex： 0 1 auto----->  "flex-grow" "flex-shrink" "flex-basis"

align-self

align-self ，单个项目有与其他项目不一样的对齐方式，可覆盖父容器的align-items属性

浏览器bug

在有些浏览器中，会有一个 bug，允许Flex项目收缩后比其内容尺寸小。这是个很古怪的行为。

解决这个 bug 的变通方案是把 flex-shrink 的属性值设置为 0，而不是默认值 1，同时，把 flex-basis 属性设置为 auto。