实现三栏布局的六种方式

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

圣杯布局

圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。

基础HTML：

    

        
        

            center
        
        

            left
        
        

            right
        
    

基础CSS：

     .container {
        overflow: hidden;
    }
    .container > div {
        position: relative;
        float: left;
        height: 100px;
    }
    .center {
        width: 100%;
        background-color: red;
    }
    .left {
        width: 200px;
        background-color: green;
    }
    .right {
        width: 200px;
        background-color: blue;
    }

对于container，给它设置一个overflow: hidden使其成为一个BFC，使三栏浮动，并相对定位，给左右两个容器设置200px的宽度中间的容器设置100%的宽度。

此时 left 和 right 被相对于父元素container宽度的100%的 center 挤到下面。

BFC的作用：

1. 消除Margin Collapse
2. 容纳浮动元素
3. 阻止文本换行

步骤：

1. 把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center 左侧之上。
2. 同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
3. 这时 center 的两侧被 left 和 right 覆盖了，因此给 container设置padding: 0 200px
4. 由于 left 和 right 也同时往中间缩，因此给 left 和 right 分别设置left: -200px; right: -200px，往两侧分别偏移自身的宽度去覆盖掉 contaniner 使用padding后的空白位置。

这时，圣杯布局就完成了，但是在拖到很小的时候，布局会乱，以下是最终样式。

.container {
  overflow: hidden;
  padding: 0 200px;
}
.container > div {
  position: relative;
  float: left;
  height: 100px;
}
.center {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  margin-left: -100%;
  left: -200px;
}
.right {
  width: 200px;
  background-color: blue;
  margin-left: -200px;
  right: -200px;
}

双飞翼布局

这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。

双飞翼布局给 center 部分包裹了一个 main 通过设置margin主动地把页面撑开。

基础HTML：

  
  

    

      center
    
  
  

    left
  
  

    right
  

步骤 1 和 2 同圣杯布局

区别：

第三步：

给 main 设置margin: 0 200px，同时设置overflow: hidden使其成为一个BFC

    .main {
        height: 100%;
        margin: 0 200px;
        background-color: rosybrown;
        overflow: hidden;
    }

这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在main中。

以下是最终样式：

.container {
  overflow: hidden;
}
.container > div {
  position: relative;
  float: left;
  height: 100px;
}
.center {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  margin-left: -100%;
}
.right {
  width: 200px;
  background-color: blue;
  margin-left: -200px;
}
.main {
  height: 100%;
  margin: 0 200px;
  background-color: rosybrown;
  overflow: hidden;
}

Flex布局

Flex布局是由CSS3提供的一种方便的布局方式。

基础HTML：

    

        
        

            center
        
        

            left
        
        

            right
        
    

步骤：

1. 给 container 设置为一个 flex 容器display: flex
2. center 的宽度设置为width: 100%，left 和 right 设置为width: 200px
3. 为了不让 left 和 right 收缩，给它们设置flex-shrink: 0
4. 使用order属性给三个部分的 DOM 结构进行排序：left：order: 1，center：order: 2，right：order: 3

flex-shrink:

定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小。

可以看到，flex 布局是一种极其灵活的布局方式。

以下是最终样式：

.container {
  display: flex;
}
.center {
  background-color: red;
  width: 100%;
  order: 2;
}
.left {
  background-color: green;
  width: 200px;
  flex-shrink: 0;
  order: 1;
}
.right {
  background-color: blue;
  width: 200px;
  flex-shrink: 0;
  order: 3;
}

绝对定位布局

基础HTML：

    

        
        

            center
        
        

            left
        
        

            right
        
    

步骤：

1. 给 container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。
2. left 向左浮动，right 向右浮动。
3. center 使用绝对定位，通过设置left和right并把两边撑开。
4. center 设置top: 0和bottom: 0使其高度撑开。

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
}

这种方式的缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

table-cell布局

表格布局的好处是能使三栏的高度统一。

基础HTML：

    

        

            left
        
        
        

            center
        
        

            right
        
    

步骤：

1. 给三栏都设置为表格单元 display: table-cell
2. left 和 right width: 200px，center width: 100%
3. 这时 left 和 right 被挤到两边去了，因此要分别设置min-width: 200px确保不会被挤压。

    .container {
        overflow: hidden;
        position: relative;
    }
    .container > div {
        display: table-cell;
        height: 100%;
    }
    .center {
        margin: 0 200px;
        width: 100%;
        background: red;
    }
    .left {
        width: 200px;
        min-width: 200px;
        background-color: green;
    }
    .right {
        width: 200px;
        min-width: 200px;
        background-color: blue;
    }

这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。

网格布局

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

基础HTML：

    

        

            left
        
        
        

            center
        
        

            right
        
    

步骤：

1. 给 container 设置为display: grid
2. 设置三栏的高度：grid-template-rows: 100px
3. 设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 200px auto 200px;

    .container {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 200px auto 200px;
    }

仅仅四条样式命令就能完成三栏布局，可见网格布局之强大

总结

1. 圣杯布局、双飞翼布局、flex布局的高度取决于内容区(center部分)，页面的高度取决于内容区
2. 绝对定位的内容区高度取决于两边栏的最高点。
3. table-cell布局能让三栏的高度一致，但不能优先渲染 center。
4. 网格布局极其强大，但兼容性差

外部资源

• 阮一峰,《Flex 布局教程：语法篇》
• 阮一峰,《Flex 布局教程：实例篇》
• MDN,《CSS Grid Layout》