flex弹性盒子布局

display:box;display:webkit-box;display:moz-box;

display:flex;display：webkt-flex;

两者都属于弹性盒子布局，前者是09年开始的，而后者是12年开始进行的。但是在使用的时候，后者还不能完全代替前者，所以为了浏览器的兼容，最好都写上。今天主要来认识一下display:flex；它能很好的解决前端页面居中问题。首先在父容器中声明，display:flex;display：webkt-flex;然后我们来看看父容器属性控制：

1.flex-dirextion：row||row-reverse||column||column-reverse;   //父容器里面的子排列方式，默认是row

2.flex-wrap：nowrap||wrap||wrap-reverse；   //当父容器的子很多的时候，设置是否分行，默认是nowrap不分行

flex-flow：  //是1，2属性的结合

3.justify-content：flex-start||flex-end||center||space-bteween||space-around；//表示对父容器中子在横向富余空间的划分

4.align-content：flex-start||flex-end||center||space-bteween||space-around||stretch；//表示对父容器中子在纵向富余空间的划分

5.align-items：flex-start||flex-end||center||baseline||stretch；//表示对父容器子在纵向富余空间的划分

子容器属性控制：

1.order：-1||0||1；  //默认是0，数值越小item越靠前

2.flex-grow：0||1||2；  //默认是0，都是1表示将父剩余空间平分，如果有一个是2则是该空间是其他的两倍，这个特效可以用来做手风琴特效

3.flex-shrink：0||1||2；//默认是1，当项目缩小时，设置1的都跟着缩小，而设置0的不缩小

4.flex-basis：

flex:1 0 auto  //是2,3,4的结合

5.align-self：flex-start||flex-end||center||baseline||stretch  //设置单个子容器纵向布局