css实现左右定宽，中间自适应布局-FLEX

<div class="container">
    <!-- 注意是left main right -->
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
  </div>
  <style>
    .container {
      display: flex;
      min-height: 100px;
    }

    .left {
      flex-basis: 200px;
      background: green;
    }

    .main {
      flex: auto;
      background: blue;
    }

    .right {
      flex-basis: 200px;
      background: red;
    }
  </style>

flex布局，弹性布局，可以简便、完整、响应式地实现各种页面布局，未来的布局的首选方案（当然如果你要考虑ie,另说）
.main使用flex属性，.left 和.right使用flex-basis 属性
flex属性是flex-grow（如果有剩余空间，是否扩大）, flex-shrink（如果空间不够，是否压缩） 和 flex-basis（本身的空间大小）的简写，默认值为0 1 auto。后两个属性可选
flex属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto),这里使用的是auto，如果有剩余空间，则扩大，如果空间不够,则压缩