CSS3：实现三栏布局的五种方法

背景

在前端面试中，面试官出于对css基础的考察，通常会问一个三栏布局的问题，即：页面上有三个区域，如何实现左右宽500px，中间宽度自适应，通常我们会答出来一两种方法，但是其实有五种方法，如果都答出来，肯定是加分的，接下来我会一一介绍这五种方法

基础布局

我们先新建html,建立三个div，用不同的背景颜色表示，左右div宽度设置成500px，为了方便展示，高度设为600px

<div class="container">
  <div class="left" style="background-color: #ff0000;"></div>
  <div class="middle" style="background-color: #fff000;"></div>
  <div class="right" style="background-color: #00ff00;"></div>
</div>
<style>
  div {
    height: 600px;
  }
  .left, .right {
    width: 500px;
  }
</style

float 浮动 + calc

不同于两栏布局可以左侧浮动，右侧空值，三栏需要中间实现自适应的话使用 css3 的 calc

.left {
  float: left;
}
.middle {
  width: calc(100% - 1000px);
  float: left;
}
.right {
  float: right;
}

绝对定位

使用绝对定位 position: absolute 达到效果

.container {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
}
.middle {
  margin: 0 500px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}

flex 布局

弹性布局则要简单的多，中间设置flex:1，自动延伸就可以了，这也是目前我们在实际业务中最常用的方法

.container {
  display: flex;
}
.middle {
  flex: 1;
}

表格自动铺满布局

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  display: table-cell;
}
.middle {
  display: table-cell;
  width: auto;
}
.right {
  display: table-cell;
}

css3 grid 布局

.container {
  display: grid;
  grid-template-columns: 500px auto 500px
}

grid 布局是最简单的，根本不用进行额外的宽度设置，grid 意思是网格布局，是css3 推出的一种强大的栅格布局方案，之后我们会专门出一期来讲解grid的使用，敬请期待吧。