流式布局

之前这种布局都是百分比，包括间隙，直接问题是屏幕大的时候 间隙太大，而需求是中间间隙不变，盒子随着屏幕变大变小，所以总结了一下，以后用的时候直接套就可以~

先贴结构：

    <div class="father">        <div class="box1">            <div>            </div>        </div>        <div class="box2">            <div></div>        </div>        <div class="box3">            <div></div>        </div>    </div>

再贴css：

        .father{            width:80%;            height:500px;            border: 1px solid #000;            margin:100px auto;        }        .father > div{            width:33.33333%;            height:500px;            float: left;            box-sizing: border-box;        }        .box1{            padding-right:6.66666px;        }        .box3{            padding-left:6.66666px;        }        .box2{            padding:0 3.33333px;        }        .father > div > div{            width:100%;            height:500px;            background-color: red;        }

运行结果：

间隙是父盒子的padding挤出来的，父盒子的width=33.33333%-padding的值
设box1的padding为x box2的padding为y
则有：
2y=x；x+y=20；（这里的20就是box1与box2之间的间隙）
如果你想要盒子之间的间隙是20px；

    .box1{        padding-right:40/3    }    .box3{        padding-left:40/3    }    .box2{        padding:0 20/3    }

以上就实现了中间间隙固定 盒子自适应的布局，ie兼容到ie8

还有一种写法，兼容到ie10的
布局：

<div class="father">            <div></div>            <div></div>            <div></div></div>

css：

.father{        width:80%;        height:500px;        border: 1px solid #000;        margin:100px auto;        display:-webkit-box;        display:box;        display:flex;        padding-left:10px;        box-sizing: border-box;    }    .father > div{        flex: 1;        -webkit-box-flex:1;        margin-right:10px;    }    .father > div:nth-child(1){        background-color: red;    }    .father > div:nth-child(2){        background-color: green;    }    .father > div:nth-child(3){        background-color: blue;    }

运行效果：

因为dispaly：flex兼容到ie10所以目前电脑端不采用 手机端可以用

以上就是流式布局的总结，希望自己写出来也能帮助同行人。记得如果觉得我写的好的话，给我点赞哦