关于圣杯布局的思考

经常会遇到这样一个场景：

写一个两侧宽度固定，中间宽度自适应的三栏布局。

image

圣杯布局

<html>
 <head>
      <style>
            * {
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 620px;  /* 格外注意：页面的最小宽度 */
            }
            .middle,
            .left,
            .right {
                position: relative;
                float: left;
                height: 100%;
            }
            .container {
                padding: 0 220px 0 200px;
                overflow: hidden;
            }
            .left {
             /* 关键代码：这里使用负外边距（nagetive margin）将left放置到之前预留出的位置上 */
                margin-left: -100%;
                left: -200px;
                width: 200px;
                background: #002496;
            }
            .right {
                margin-left: -220px; /* 关键代码 */
                right: -220px;
                width: 220px;
                background: #ed2738;
            }
            .middle {
                width: 100%;
                background: #c0c0d4;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='middle'>middle</div>
            <div class='left'>left</div>
            <div class='right'>right</div>
        </div>
    </body>
    
</html>

双飞翼布局

基于圣杯布局进行的优化版本：双飞翼布局

<html>
 <head>
      <style>
            * {
                margin: 0;
                padding: 0;
            }
            body{
                min-width: 620px; /* 页面的最小宽度 */
            }
            .middle,
            .left,
            .right {
                position: relative;
                float: left;
                height: 100%;
            }
            .container {
                overflow: hidden;
                /* 圣杯布局在container块上加内边距（padding: 0 220px 0 200px;） */
            }
            .left {
                margin-left: -100%;
                width: 200px;
                background: #002496;
            }
            .right {
                margin-left: -220px;
                width: 220px;
                background: #ed2738;
            }
            .middle {
                width: 100%;
                background: #c0c0d4;
            }
            .contant{
                /* 双飞翼布局将其改为contant块上加外边距（margin: 0 220px 0 200px;） */
                margin: 0 220px 0 200px;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='middle'>
                <div class="contant">middle</div>
            </div>
            <div class='left'>left</div>
            <div class='right'>right</div>
        </div>
    </body>
    
</html>

关于页面最小宽度：

1、要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+220=420px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+200+220=620px；

2、由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+220=420px。

Flex布局

<html>
 <head>
      <style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                display: flex;
                height: 100%;
            }
            .left {
                background: #002496;
                width: 200px;
            }
            .right {
                width: 200px;
                background: #ed2738;
            }
            .middle {
                background: #c0c0d4;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='left'>left</div>
            <div class='middle'>middle</div>
            <div class='right'>right</div>
        </div>
    </body>
</html>

缺点：
flex固有的兼容性问题，根据CanIUse的数据可以总结如下：

IE10部分支持2012，需要-ms-前缀

Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前缀

Safari7/7.1/8部分支持2012，需要-webkit-前缀

IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀

.box{
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
 
 }
 
.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
 }

Grid布局

Grid布局最简单了，两句话搞定，但兼容性堪忧，(>= IE 10)

<html>
 <head>
      <style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                display: grid;
                grid-template-columns: 200px 1fr 200px;
                height: 100%;
            }
            .left {
                background: #002496;
            }
            .right {
            
                background: #ed2738;
            }
            .middle {
                background: #c0c0d4;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='left'>left</div>
            <div class='middle'>middle</div>
            <div class='right'>right</div>
        </div>
    </body>
</html>

面向移动端的话，可以考虑引入grid了，毕竟手机更新换代快，浏览器兼容问题没那么严重。
关于flex与grid布局的选择，要结合起来用才能发挥他们各自的优势，比如：

1、对于居中（特别是垂直居中）问题、还有元素的一维分布（一条线上如何分布），用flex再合适不过了。

2、如果涉及到二维（多行多列）确定的布局，使用Grid。

3、涉及到响应式的页面元素，使用flex + width百分比宽度简直太好用，因为flex天生的流式布局。