今日前端小知识——实现三栏布局（两侧固定宽度，中间自适应）的方法

不管是在实际开发还是在面试过程中，三栏布局的方法都很重要，需要掌握。针对两侧固定宽度、中间自适应的情况，可能一般都会想到常用的浮动和定位，但实际上至少有 5 种实现方法。同时看一下不同的实现方法中，当中间部分的高度比两侧（左侧固定高度，右侧高度不定）更高时，两侧会是什么效果，基础代码如下。

<style>
  .container {
    color: aliceblue;
    text-align: center;
  }
  .left {
    background-color: brown;
    width: 200px;
    height: 30px;
  }
  .center {
    background-color: chocolate;
    height: 50px;
  }
  .right {
    background-color: blueviolet;
    width: 100px;
  }
</style>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

浮动

左边盒子向左浮动，右边盒子向右浮动，中间盒子必须置于左右盒子之后，否则因为浮动盒子不影响在其之前的盒子，右边盒子会在中间盒子所在行的下边向右浮动，无法达到预期效果。还需要通过 margin-left/right 给左右盒子留出位置，否则当中间内容比两侧内容高时，高出的部分会占满整行。利用浮动布局时，要时刻注意避免浮动给后续其它的盒子造成影响，在这里选择激活父盒子的 BFC 来清除浮动。代码以及效果如下。

<style>
.container {
  overflow: auto;
}
.container > .left {
  float: left;
}
.container > .right {
  float: right;
}
.container > .center {
  margin-left: 200px;
  margin-right: 100px;
}
</style>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <!-- 左右两侧浮动在前，中间自适应的必须放在最后 -->
  <div class="center">center</div>
</div>

如果不给中间盒子指定 margin-left/right，就会是下面的效果。

观察上面的效果可以发现，使用浮动的方法布局时，高度已知的盒子（left 以及 center）按照设定的高度显示，高度未知的盒子（right）则由内容撑开，盒子的高度不受其它盒子影响。

定位

使用定位的方法，在子绝父相的情况下，通过 left:0 将左盒子放在最左侧，right:0 将右盒子放置在最右侧，中间盒子通过 left/right 分别留出左右盒子的宽度，即可实现想要的效果。代码如下。

<style>
.container {
  position: relative;
}
.container > .left {
  position: absolute;
  left: 0;
}
.container > .center {
  position: absolute;
  left: 200px;
  right: 100px;
}
.container > .right {
  position: absolute;
  right: 0;
}
</style>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

要注意，由于 position:absolute 的元素在正常文档流中不占据位置，所以此时父盒子的高度为 0。在定位方法中，盒子高度的情况与浮动方法中类似，盒子的高度不受其它盒子影响。

table布局

在更早期的时候，也常常使用 table 进行布局，table 布局将页面按照表格的方式分成多个行列，但是这样不仅写起来很麻烦，而且让整个页面代码看上去很复杂难以理解，尤其是在 table 中内嵌 table 的时候。我有一段时间接触过使用 table 布局的项目，每次找元素的时候很难找，要新增页面元素的时候也很头疼，几乎每天都在找到底是哪个 table (T ^ T)
table 布局有自己本身的一些属性，现在我们只需要通过 display: table 让父盒子使用 table 布局，通过 display: table-cell 将所有子盒子变成 table 的列即可。用起来还是很方便的，代码如下。

<style>
.container {
  display: table;
}
.container > div {
  display: table-cell;
}
</style>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

table布局中，子盒子的高度由最高的子盒子决定，无法单独设置盒子的高度。

flex布局

flex 布局是一种新的布局方案，可以更快速、简便、响应式地完成页面布局。使用 flex 布局很简单，给父盒子设置 display: flex，它就成了一个 flex 容器，其直接子元素自动成为了 flex 元素。容器可以指定元素的排列方向（flex-direction）、是否换行（flex-wrap）、对齐方式（justify-content/align-items/align-content），容器中的元素可以指定自身在空间多余时如何扩展（flex-grow）、在空间不足时如何缩小（flex-shrink）、在分配多余空间前元素所占的空间（flex-basis），这三个属性通常写在一起用 flex 属性来表示，默认值为 0 1 auto，三个取值按照顺序分别对应 flex-grow、flex-shrink、flex-basis，简写就是 flex: initial。通过给中间盒子设置 flex: 1 就可以实现目标效果，代码如下。

<style>
.container {
  display: flex;
}
.container > .center {
  flex: 1;
}
</style>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

根据 MDN 的解释，flex:1 实际就是 flex:1 1 0 ，表示元素在 flex-basis 为 0 的基础上伸缩，当主轴上存在剩余空间时，设置了 flex:1 的元素会按比例分配剩余空间。在 flex 容器中，如果一些元素比其他元素高，那么未设置高度或高度为 auto 的元素会沿交叉轴被拉伸来填满它的大小。所以在效果图中，高度已知的左盒子和中间盒子都按照指定高度显示，但高度未知的右盒子会被拉伸至与最高的盒子相同高度。

grid布局

grid 网格布局比 flex 布局更强大，是一个二维网格布局系统，用于布局页面主要的区域布局或小型组件。grid 布局和 flex 布局的主要区别在于 flex 布局是为一维布局服务的（沿横向或纵向），而 grid 布局是为二维布局服务的（同时沿着横向和纵向），在网格布局中可以更灵活地控制元素的位置。通过 displa: grid 让父元素成为网格容器，其直系子元素都会自动成为网格项。网格容器可以设置网格的行（grid-template-rows）和列（grid-template-columns）、网格横向间距即列间距（grid-column-gap）、网格纵向间距即行间距（grid-row-gap）。网格项是通过网格线来确定位置的，设置网格项起始列线（grid-column-start）、网格项终止列线（grid-column-end）、网格项起始行线（grid-row-start）与网格项终止行线（grid-row-end）可以确定一个网格项如何跨网格轨道显示。通过 grid-template-columns: 200px auto 100px; 创建三个列轨道，其中左右列轨道的宽度分别为 200px和 100px，中间列轨道为 auto，即可实现目标效果。代码以及效果图如下。

<style>
.container {
  display: grid;
  grid-template-columns: 200px auto 100px;
}
</style>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

效果图与 flex 布局的效果相同。grid 布局与 flex 布局有很多相似之处，绝大多数情况要实现同一种布局效果可以二选一，但是当我们要同时控制行和列布局时，选用 grid 布局或许更合适。