三栏布局之中间固定，左右两栏自适应几种方案

三栏布局，假定中间宽度固定为200px，左右两栏自适应
grid布局，请到最新chrome浏览器上运行体验

  
    
    
    
      body {
 margin: 0;
 padding: 0;
      }
      section.layout {
 margin-bottom: 50px;
 text-align: center;
 color: white;
      }
      .left {
 background-color: #65d;
      }
      .center {
 background-color: #f05;
      }
      .right {
 background-color: blue;
      }
    
  
  
    

      
      
 .layout.flex .page {
   display: flex;

 }
 .layout.flex .left, .layout.flex .right {
   flex: 1;
 }

 .layout.flex .center {
   width: 200px;
 }
      
      
 左边自适应
 flex布局-中间固定宽度部分
 右边自适应
      
    

    

      
      
 .layout.table .page {
   display: table;
   width: 100%;
 }
 .layout.table .page>div {
   display: table-cell;
 }
 .layout.table .center {
   width: 200px;
 }
      
      
 左边自适应
 table布局-中间固定宽度部分
 右边自适应
      
    

    

      
      
 .layout.grid .page {
   display: grid;
   grid-template-rows: 100%;
   grid-template-columns: auto 200px auto;
 }
      
      
 左边自适应
 
   grid布局-中间固定宽度部分
 
 右边自适应