三栏布局：两边固定中间自适应（圣杯，双飞翼，flex）

tips：接下去会在github写博客，简书不再更新和修改文章，欢迎大家逛逛我的新博客点击查看，我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流😄。

圣杯布局

<div class="wrapper">
        <div class="col main">main</div>
        <div class="col left">left</div>
        <div class="col right">right</div>
 </div>

            .wrapper {
                padding: 0 120px 0 100px;
                overflow: hidden;
            }

            .col {
                position: relative;
                float: left;
            }

            .main {
                width: 100%;
                background-color: red;
            }

            .left {
                width: 100px;
                margin-left: -100%;
                left: -100px;
                background-color: green;
            }

            .right {
                width: 120px;
                margin-left: -120px;
                right: -120px;
                background-color: blue;
            }

缺点：圣杯布局有个问题，当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。

双飞翼布局

它与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。链接：这篇文章一步步借图剖析，写得很好。

相似点：

1.给main设置width: 100%，占满窗口，从而自适应。

2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）

3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。

image

区别：

1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。

2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。

3.双飞翼布局不用设置相对布局，以及对应的left和right值。

<div class="wrapper">
        <div class="col main">
            <div class="main-wrap">main</div>
        </div>
        <div class="col left">left</div>
        <div class="col right">right</div>
</div>

            .wrapper {
                padding: 0;
                overflow: hidden;
            }
            .col {
                float: left;
            }
            .main {
                width: 100%;
                background-color: red;
            }
            .main-wrap {
                margin: 0 120px 0 100px;
            }
            .left {
                width: 100px;
                margin-left: -100%;
                background-color: green;
            }
            .right {
                width: 120px;
                margin-left: -120px;
                background-color: blue;
            }

flex布局

思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。

<div class="wrapper">
            <div class="main">
                这是中间
            </div>  
            <div class="left">这是左侧</div>
            <div class="right">这是右侧</div>
</div>

    .wrapper{
        display: flex;
    }
    .main{
        background-color: red;
        flex-grow: 1;
    }
   .left{
        flex:0 1 100px;
        background-color: blue;
        order: -1;
    }
    .right{
        flex:0 1 120px;
        background-color: green;
        order: 1;
    }

缺点：兼容性。