栅格布局的三种主要实现方式原理分析

实现栅格系统布局的方式

1. 纯伸缩flex布局，实例如下：

html:

<div class="container">
    <div class="row">
        <div class="col-6 order-1">col-1</div>
        <div class="col-6 order-2">col-2</div>
        <div class="col-6 order-3">col-3</div>
        <div class="col-6 order-4">col-4</div>
        <div class="col-6 order-5">col-5</div>
        <div class="col-6 order-6">col-6</div>
        <div class="col-6 order-7">col-7</div>
        <div class="col-6 order-8">col-8</div>
    </div>
</div>

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：

<div class="container">
    <div class="row">
        <div class="col-md-12">col-12</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-4</div>
        <div class="col-md-4">col-4</div>
        <div class="col-md-4">col-4</div>
    </div>
    ...
</div>

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:

<div class="pure-g">
    <div class="pure-u-1-3">1/3</div>
    <div class="pure-u-1-3">1/3</div>
    <div class="pure-u-1-3">1/3</div>
</div>
<div class="pure-g">
    <div class="pure-u-1-8">1/8</div>
    <div class="pure-u-1-8">1/8</div>
    <div class="pure-u-1-8">1/8</div>
    ...
</div>
<div class="pure-g">
    <div class="pure-u-1-24">1/24</div>
    <div class="pure-u-1-24">1/24</div>
    <div class="pure-u-1-24">1/24</div>
    ...
</div>

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来实现栅格布局，需要注意的是，它不支持偏移和指定顺序的排版。