css实现三列布局（圣杯布局）的几种方式

前端非常经典的三列布局（圣杯布局），有多种实现方式，这里简单总结下实现方式

圣杯布局简单来说就是把页面分为三列，左右两列固定宽度，中间自适应宽度，假设每列高度为屏幕高度，左右两列宽度为200px，中间自适应宽度

float实现三列布局

• HTML结构

     <div class="container">
         <div class="left"></div>
         <div class="right"></div>
         <div class="center"></div>    
     </div>

• CSS代码

      .container{
      	height: 100%;
      }
      .left{
          float: left;
          width: 200px;
          height: 100%;
          background-color: pink;
      }
      .center{
          height: 100%;
          background-color: powderblue;
          margin: 0 200px;
          height: 300px;
      }
      .right{
          float: right;
          width: 200px;
          height: 100%;
          background-color: pink;
       }

这里会奇怪为什么center元素要写在最后面，left,right元素使用浮动布局，纷纷都脱离了文档流，碰到父元素或者另外一个浮动元素就会浮动停止，浮动元素后面的元素会围绕着它；center元素没有设置浮动，则在常规文档中，left和right看起来像是漂浮在了常规流中；如果center写在中间，右边的元素碰到了center就停止了，不会飘在center的上方。（绝对定位实现三列布局，与float原理类似，position:absolute使得元素脱离文档流，下面就不详细说明position的实现方式了）

flex实现三列布局

flex实现三列布局有多种代码表示方式，可以使用flex-basis与flex-grow搭配着实现，也可以用width和flex:1（flex-grow,flex-shrink,flex-basis的缩写）实现等等，原理都是一样，只是代码的组织方式不一样，这里总结flex-basis和flex-grow的实现方式

• HTML代码

   
   <div class="container">
        <div class="left"></div>
	     <div class="center"></div>
	     <div class="right"></div>
	</div>

• CSS代码

      .container{
          display: flex;
          height: 100%;
      }
      .left{
          flex-basis: 200px;
          height: 100%;
          background-color: pink;
      }
      .center{
          flex-grow: 1;
          height: 100%;
          background-color: powderblue;
      }
      .right{
          flex-basis: 200px;
          height: 100%;
          background-color: pink;
      }

flex-basis设置左右两边定宽，中间元素flex-grow实现元素填满剩余空间

calc计算属性实现三列布局

    .container{
        height: 100%;
    }
    .left{
        display: inline-block;
        width: 200px;
        height: 100%;
        background-color: pink;
    }
    .center{
        display: inline-block;
        height: 100%;
        width: calc(100% - 400px);
        background-color: powderblue;
    }
    .right{
        display: inline-block;
        width: 200px;
        height: 100%;
        background-color: pink;
    }

calc结合着display:inline-block来实现，让三个div水平分布，设置左右两边固定200px.中间center元素利用计算属性计算剩余宽度

table和table-cell实现三列布局

		.container{
            display: table;
            height: 100%;
            width: 100%;
        }
        .left{
            display: table-cell;
            width: 200px;
            height: 100%;
            background-color: pink;
        }
        .center{
            width: auto;
            height: 100%;
            display: table-cell;
            background-color: powderblue;
        }
        .right{
            display: table-cell;
            width: 200px;
            height: 100%;
            background-color: pink;
        }

table实现的时候，一定要给 父元素设置宽度，display:table默认宽度不是100%