四种实现三栏布局的方法

三栏布局是实现两端元素固定，中间元素宽度自适应，是一种比较常见的布局，下面有四种方式都可以实现。

1.浮动

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式中间一栏必须放到最后。

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son3"></div>
        <div class="son2"></div>
    </div>
</body>
<style>
    .father{
        width: 400px;
        height: 400px;
        background: burlywood;
    }
    .son1{
        width: 100px;
        height: 100px;
        background: palegreen;
        float: left;
    }
    .son2{
        height: 100px;
        background: cornflowerblue;
        margin-right: 100px;
        margin-left: 100px;
    }
    .son3{
        height: 100px;
        width: 100px;
        background: yellowgreen;
        float: right;
    }
</style>

2.绝对定位

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
<style>
    .father{
        width: 400px;
        height: 400px;
        background: burlywood;
        position: relative;
    }
    .son1{
        width: 100px;
        height: 100px;
        background: palegreen;
        position: absolute;
    }
    .son2{
        height: 100px;
        background: cornflowerblue;
        margin-right: 100px;
        margin-left: 100px;
    }
    .son3{
        height: 100px;
        width: 100px;
        right: 0;
        top: 0;
        background: yellowgreen;
        position: absolute;
    }
</style>

3.flex：1

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

因为flex属性是flex-grow，flex-shrink和flex-basis的简写方式，默认0 1 auto即flex-grow:0;flex-shrink:1;flex-basis:0%.其实后两个从这里就可以推导出flex：1相对于flex：1 1 auto

flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比
flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例
flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉。

flex：1；的逻辑就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果，来看下具体代码实现，代码实现就比较简单了。

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
<style>
    .father {
        width: 400px;
        height: 400px;
        background: burlywood;
        display: flex;
    }
    .son1 {
        width: 100px;
        height: 100px;
        background: palegreen;
    }
    .son2 {
        height: 100px;
        background: yellowgreen;
        flex: 1;
    }
    .son3 {
        height: 100px;
        width: 100px;
        background: cornflowerblue;
    }
</style>
</html>

4.calc

利用calc，width: calc(100% - 200px)。

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
<style>
    .father {
        width: 400px;
        height: 400px;
        background: burlywood;
        display: flex;
    }
    .son1 {
        width: 100px;
        height: 100px;
        background: palegreen;
    }
    .son2 {
        height: 100px;
        background: yellowgreen;
        width: calc(100% - 200px)
    }
    .son3 {
        height: 100px;
        width: 100px;
        background: cornflowerblue;
    }
</style>
</html>

最后实现效果图

三栏布局.png

三栏布局的四种简单实现