不知道三栏布局前还以为是什么普通的div排列方式，深入了解才发现自己身处于圣彼得大教堂。毫无疑问，包括圣杯布局、双飞翼布局、弹性布局在内的种种，它们都是天才的儿子。

三栏布局

三栏布局是一种常见的网页布局设计，通常包括左栏、中间栏和右栏。其中不同的栏位根据需求可以放上不同的模块，不仅可以达到视觉上的平衡和美感，又满足了业务需求、增强了用户体验，最大的特点是实现了中间栏主体内容优先加载，左右栏固定，中间自适应。

初始三栏布局

最普通的三栏布局甚至不能够被称为三栏布局，其本质只是div按顺序摆放形成的三列显示而已。

    <div class="page">
        <div class="left">左栏</div>
        <div class="content">中间栏</div>
        <div class="right">右栏</div>
    </div>

这里有个小技巧，如果你想让哪栏先显示，那就把它放在最前面，例如，如果我想让中间栏最先显示：

    <div class="page">
        <div class="content">中间栏</div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>

现在我们添加上CSS代码，来定义三栏的宽高背景色，需要注意的是，中间栏我们先不定义宽度，因为我们要实现的目的是中间栏的宽度会随着调整自定义的改变：

 * {
       padding: 0;
       margin: 0;
   }
   .left, .right {
       height: 200px;
       width: 200px;
       background-color: red;
   }
   .content {
       height: 200px;
        /* 中间栏先不设置宽度(width) */
       background-color: pink;
   }

使用display: inline-block将 page 中的 div 设置成行内块元素，使三栏出现在同一行。

    .page {
    height: 200px;
    }
    .page div {
    /* 设置成行内块元素  */
    display: inline-block;
    font-size: 15px;
    }

需要注意的是，现在的 div 与 div 之间出现了间隙，这是因为 div 之间换行导致行内块之间出现空格，我们可以在 page 内添加font-size: 0将 page 中的字体大小设置为0，从而消除空格的影响。

    .page {
    height: 200px;
    /* 将page内字体大小设置为零  */
    font-size: 0;
    }
    .page div {
    /* 设置成行内块元素  */
    display: inline-block;
    font-size: 15px;
    }

最后，我们在中间栏 content 内添加上width: calc(100vw - 400px)，通过计算整个 page 页面的宽度减去我们定义的左右栏宽度得到自适应的中间栏宽度。

这样一来我们便实现了一个简单的三栏排列，同时，真正精彩的三栏布局开始了！

圣杯布局

圣杯布局的来历是2006年发在a list part上的这篇文章：In Search of the Holy Grail · An A List Apart Article；

我们现在要做的，就是一个左右栏宽度固定，中间栏宽度自适应的圣杯布局。

与初始三栏布局不同的是，我们使用浮动布局float: left，将中间栏 content 的宽度设置为 100%来占据整个父容器 page，同时在 page 左右间距设置为 200px，符合我们设置的左右栏宽度。这正是实现中间栏优先加载的原因。

    *{
        margin:0; 
        padding: 0;
    }
    .left,.right{
        height: 200px;
        width: 200px;
        background-color: red;
    }
    .content{
        /* 将宽度width设置为100% */
        width: 100%;
        height: 200px;
        background-color: pink;
    }
    .page{
        /* 左右边距200px */
        padding: 0 200px;
        height: 200px;
    }
    .page div{
        /* 将三个容器全部浮动 */
        float: left;
    }

不难看出，我们之所以在父容器 page 左右都设置 200px 的间距，目的就是给左右栏腾出位置，但是问题来了，如何将被挤到换行的左右栏放去我们想要的位置呢？

    .left{
        margin-left: -200px;
    }

很简单，以左栏举例，我们先把他在 page 内的左边距设置成 -200px 试试。

好家伙，左栏猛地一跳，回到了与中间栏相同的同一行。这时候思路一下子就清晰了，我们接下来要做的就是帮助左栏完成二段跳，使它落在我们原本为它预留的空间，再用同样的方法使右栏归位。

对于左栏，这里最好的方法就是使用相对定位position: relative，再使用left: -100%就能让左栏移动一个 page 的距离。

对于左栏，我们同样使用相对定位，先用margin-left: -200px回到与中间栏(content)的同一行，再向右移动200px。

这里左右栏使用的相对定位，便是圣杯布局能实现中间栏自适应的关键。

    .left{
        margin-left: -200px;
        position: relative;
        left: -100%;
    }
    .right{
        margin-left: -200px;
        position: relative;
        right: -200px;
    }

完美！至此，经典的圣杯布局便大功告成！

双飞翼布局

双飞翼布局始于淘宝UED，是玉伯大佬提出，针对圣杯局部优化的解决方案。

双飞翼布局最大的特点就是他在中间栏（content）内部又放了一个子容器（inner）。将中间栏的主体内容放在子容器中。 再将包含有中间栏的div放在第一行实现优先加载。

    <div class="page">
        <div class="content">
            <div class="inner">中间栏</div>
        </div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>

与圣杯布局不同的是，双飞翼布局将原本属于 page 的属性左右边距 200px 换到了中间栏的子容器 inner 中。

    *{
        margin:0;
        padding: 0;
    }
    .left,.right{
        height: 200px;
        width: 200px;
        background-color: red;
    }
    .content{
        height: 200px;
        width: 100%;
        background-color: pink;
    }
    .inner{
        /* 左右边距200px */
        margin: 0 200px;
        height: 100%;
    }
    .page{
        height: 200px;
    }
    .page > div{
        float: left;
    }

看到这里，你有没有感觉很熟悉？没错，它的核心同圣杯布局是一样的，同样是左右预留 200px 的空间给左右栏。那么，接下来我们要做的同圣杯布局如出一辙：归位左右栏。

    *{
        margin:0;
        padding: 0;
    }
    .left,.right{
        height: 200px;
        width: 200px;
        background-color: red;
    }
    .content{
        height: 200px;
        width: 100%;
        background-color: pink;
    }
    .inner{
        margin: 0 200px;
        height: 100%;
    }
    .page{
        height: 200px;
    }
    .page > div{
        float: left;
    }
    .left{
        margin-left: -100%;
    }
    .right{
        margin-left: -200px;
    }

比圣杯布局更为方便的是，双飞翼布局的左右栏不用相对定位就实现了一样的效果。

弹性布局

非要说的话，圣杯布局、双飞翼布局都是上古遗老了，甚至于弹性布局都是十多年前的产物，但不可否认的是弹性布局最为方便快捷的地位。

说到弹性布局，就离不开order和flex两个属性。

其中通过 order 属性将想要优先加载的主体内容位置移到最前方。

其中flex 是一个缩写属性，三个关键属性分别是：flex-grow、flex-shrink 和 flex-basis。

• flex-grow: 决定了子元素在容器内剩余空间分配时的放大比例。默认为 0，即子元素不会放大，如果设置为一个正数，子元素将根据比例分配剩余空间。
• flex-shrink: 决定了子元素在容器内空间不足时的收缩比例。默认为 1，即子元素可以根据需要等比例收缩以适应容器。如果设置为 0，子元素不会收缩。
• flex-basis: 指定了子元素在分配多余空间之前的基本大小。可以是一个固定值（如 100px），一个百分比（如 50%），或者 auto，表示由浏览器决定其大小。

这些属性通常一起使用，通过 flex 缩写属性可以方便地设置它们，例如：

flex: 1 1 auto;

    * {
      padding: 0;
      margin: 0;
    }
    .left, .right {
        height: 200px;
        width: 200px;
        background-color: rgb(204, 156, 156);
    }
    .content {
        height: 200px;
        background-color: rgb(251, 255, 192);
    }
    .page {
        height: 200px;
        display: flex;
    }
    .content {
      flex: 1;
      order: 1; 
    }

    .left {
      order: 0;
    }

    .right {
      order: 2;
    }

最后：

没想到，弹性布局问世之前，也有程序员好汉如过江之鲫，只为呈现出更好的三栏布局，恍然再明白原来自己已经身处于圣彼得大教堂，这些都是智慧的瑰宝。