三栏布局(双飞翼、圣杯)

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局与双飞翼布局

圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

圣杯布局

1. DOM结构

<body>
  <div id="header"></div>
  <div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
  </div>
  <div id="footer"></div>
</body>

2. CSS代码

* {
    margin: 0;
    padding: 0;
 }
body {
    min-width: 750px;
    text-align: center;
 }
#container {
    padding-left: 200px;
    padding-right: 150px;
 }
#container .column {
    float: left;
    min-height: 150px;
 }
#center {
    width: 100%;
    background: green;
 }
#left {
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
    background: orange;
 }
#right {
    width: 150px;
    margin-right: -150px;
    background: deepskyblue;
 }
#header{
    background: #dcdcdc;
    padding: 20px;
 }
#footer {
    clear: both;
    background: #dcdcdc;
 }

Tips：在#center中，包含了一条声明width: 100%，这是中间栏能够做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素(container)的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，而达不到这样的效果

中间栏仅包含较少内容

双飞翼布局

1. DOM结构

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。

2. CSS代码

* {
  margin: 0;
  padding: 0;
 }
body {
  min-width: 550px;
 }
#container {
  width: 100%;
 }
 .column {
  float: left;
  min-height: 150px;
 }
#center {
  margin-left: 200px;
  margin-right: 150px;
  background: red;
 }
#left {
  width: 200px;
  margin-left: -100%;
  background: yellow;
 }
#right {
  width: 150px;
  margin-left: -150px;
  background: blue;
 }
#header {
  background: #dcdcdc;
  padding: 20px;
  }
#footer {
  clear: both;
  padding: 40px;
  background: #dcdcdc;
 }

flex布局实现

1. DOM结构

<body>
  <div id="header"></div>
  <div id="container">
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
  </div>
  <div id="footer"></div>
</body>

与圣杯布局的DOM结构一样，但实现方法更简单

2. CSS代码

*{
  margin: 0;
  padding: 0;
 }
body{
  min-width: 550px;
 }
#container {
  display: flex;
 }
#container>div{
  min-height: 150px;
 }
#center {
  flex: 1;
  background: red;
  height: 100%;
 }
/*order属性：定义对象的排列顺序，越小越靠前，默认为0*/
#left {
  flex: 0 0 200px;
  order: -1;
  background: green;
  height: 100%;
 }
#right {
  flex: 0 0 150px;
  background: blue;
  height: 100%;
 }

原文作者：感谢!!! @放羊的小桃桃