CSS三栏布局的几种实现方式

如何实现三栏布局，也是前端面试常问的问题了。所谓的三栏布局，一般指的是“左右侧定宽，中间部分自适应”，在这篇文章中，我将分享实现三栏布局的5种方式。
关于两栏布局的实现方式，可访问：两栏布局的实现。

一、前言

假设我们要实现一个页面布局需求，其要求“从左至右，页面可分为3部分，这3部分的高度都为300px。其中左右侧宽度固定，为200px宽，中间部分自动充满剩余空间”，你该如何实现呢？
在这里我们假设已经对所有元素设置了：

1 2	margin: 0; padding: 0;

二、布局方式

1.position布局

HTML代码如下：

<!--我们假设容器元素为body元素，实际情况，可自定义一个container -->
<body>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</body>

CSS代码如下：

.left, .right {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
}
 
/* 左侧定位 */
.left {
  left: 0;
  background-color: red;
}
 
/* 中间自适应区 */
.center {
  height: 300px;
  position: absolute;
  top: 0;
  left: 200px;
  right: 200px;
  bottom: 0;
  background-color: blue;
}
 
/* 右侧定位 */
.right {
  right: 0;
  background-color: red;
}

代码逻辑方面还是比较清晰的，通过定位，将几个块放在一堆。不过其冗余度太高，而且维护成本和维护难度也相当之大。违背了DRY原则（Don’t Repeat Yourself）。

2.float + calc 布局

HTML部分不变。
CSS部分：

/* 三者共有样式 */
.left, .center, .right {
  height: 300px;
  float: left;
}
 
/* 左侧样式 */
.left {
  width: 200px;
  background-color: red;
}
 
/* 中间样式，关键在 calc */
.center {
  width: calc(100% - 400px);
  background-color: blue;
}
 
/* 右侧样式 */
.right {
  width: 200px;
  background-color: red;
}

该方式的逻辑还是挺简单的，三个块依次浮动，从而形成一行。关键部分在于 calc属性，其可以动态计算值，在该例中，其用来计算center部分的宽度，其为父元素的宽度（100%）减去左右侧实际宽度之和（200 + 200 ），利用该属性，实现了自适应宽度布局。关于该属性的具体介绍，参看 CSS3的calc()使用。

3.flex布局

HTML部分：

<!--我们假设容器元素为body元素，实际情况，可自定义一个container -->
<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS部分：

/* 外层容器设置为 flex 布局 */
.container {
  width: 100%;
  height: 300px;
  display: flex;
}
 
/* 左右侧定宽处理 */ 
.left, .right {
  flex-basis: 200px;
  background-color: red;
}
 
/* 中间部分自适应布局 */
.center {
  flex: auto;
  background-color: blue;
}

flex布局一如既往的灵活与简单。还是那句话，如果不用苦逼的兼容IE9及以下浏览器，愉快的使用flex布局吧。

4.grid布局

HTML代码部分与flex布局一致
CSS部分：

.container {
  width: 100%;
  height: 300px;
  display: grid; /* 设置为 grid 布局 */
  grid-template-columns: 200px auto 200px;/* 定义每列的宽度，左右200px，中间自适应 */
}
.left, .right {
  background-color: red;
}
.center {
  background-color: blue;
}

grid布局设置起来更方便，不过其兼容性较差，所以可以作为实验性功能使用。要查看效果，建议使用最新版的谷歌浏览器。另外，可以使用自动加前缀插件来优化代码，自动加前缀插件为Autoprefixer，这里推荐其在线工具：Autoprefixer在线工具。

5.table布局

HTML与flex布局一致
CSS部分：

.container {
  width: 100%;
  height: 300px;
  display: table;/* 设置为 table 布局 */
}
 
/* 将其子项设置为 table-cell 布局 */
.left, .center, .right {
  display: table-cell;
}
.left, .right {
  width: 200px;
  background-color: red;
}
.center {
  background-color: blue;
}

table布局很形象，就把其理解为一个表格。不过在实际运用中其实用得比较少。

三、总结

通过上文的分析，咱们可以有5种方式，以实现三栏布局。

position布局：兼容性好，不过维护和修改困难
float + calc 布局：必须要IE9以上浏览器才支持，遵循流式布局原理
flex布局：必须要IE9以上浏览器才支持，不过使用灵活、方便，推荐使用
grid布局：兼容性相对较差，可作为实验性功能
table布局：了解即可

四、下载代码

我将每种布局方式写入了单独的HTML文件，可点击此处下载示例代码压缩包。代码下载后，尽量在新版谷歌浏览器中查看效果。

您还有哪些好的布局方式呢？可以在下方留言分享哦！