实现栅格系统布局的方式
1. 纯伸缩flex布局，实例如下：
html:
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
css:
.row{
display:flex;
flex-wrap:wrap;
}
.col-6{
flex:0 0 25%;
}
.order-1{
order:1;
}
.order-2{
order:2;
}
.order-3{
order:3;
}
.order-4{
order:4;
}
.order-5{
order:5;
}
.order-6{
order:6;
}
.order-7{
order:7;
}
.order-8{
order:8;
}
//可以通过：margin-left 样式属性来设定每个col之间的偏移值;通过给父容器设定flex弹性盒子属性,和flex-wrap:no-wrap让子元素在容易内换行展示,给子元素设定可占剩余容易百分比来实现栅格布局;但要注意的是：弹性盒子，ie浏览器兼容性兼容到ie10,10以下会有兼容性问题；
2.浮动方式，实列如下：
html：
col-12
col-4
col-4
col-4
...
css:
[class |= col] { float: left; }
.col-md-1 { width: 8.33333333%; }
.col-md-2 { width: 16.66666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333%; }
.col-md-11 { width: 91.66666667%; }
.col-md-12 { width: 100%; }通过给每一行中的col加上浮动:float :left使得元素在一行渲染，给子元素加上百分比来实现栅格布局；要住意的事：这里为什么要用float浮动来实现，为了兼容ie8浏览器；
3.伸缩和行内结合的方式：雅虎的Pure,实列如下：
html:
1/3
1/3
1/3
1/8
1/8
1/8
...
1/24
1/24
1/24
...
css:
.pure-g {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
}
[class|=pure-u] {
display: inline-block;
*display: inline; /*iE < 8*/
zoom: 1;
}
.pure-u-1-24 { width: 4.1667%; }
.pure-u-2-24,.pure-u-1-12 { width: 8.3333%; }
.pure-u-3-24,.pure-u-1-8 { width: 12.5000%; }
.pure-u-4-24,.pure-u-1-6 { width: 16.6667%; }
.pure-u-5-24 { width: 20.8333%; }
...通过flex盒子和子元素的display:inline-block来实现栅格布局，需要注意的是，它不支持偏移和指定顺序的排版。