两/三栏布局的3种实现方式

两栏和三栏布局都可以分别用三种方式实现：

固定部分使用absolute定位，固定width ，浮动部分的宽度使用calc得出。
- 优点：最佳的兼容性
- 缺点：脱离文档流，定位写死不易维护
使用display: inline-block;定义栏目，结合固定与calc的width 使其在一行中排列。
- 优点：在1的基础上不用脱离文档流
- 缺点：两个inline-block之间会有1em的空档，需要设置margin-left: -1em 补齐，有hack的味道，影响代码优雅。
使用flex容器，将边栏的flex-grow与flex-shrink 都设置为0，中间栏目则设置为1即可。
- 优点：保持文档流，代码简洁易维护
- 缺点（其实没有）：不兼容旧浏览器（几乎不存在，如下图）
  
  flex布局兼容情况

以下是相应示例

代码示例(flex三栏布局) ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Trio Layout III</title>
  <style>
    #container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: row;
    }

    #left {
      flex: 0 0 150px;
      background: #ff0000;
    }

    #main {
      flex: 1 1 1px;
      background: #00ff00;
    }

    #right {
      flex: 0 0 150px;
      background: #0000ff;
    }
  </style>
</head>
<body>
<div id="container">
  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>
</div>
</body>
</html>

效果

拉伸后

拉伸前