圣杯布局

圣杯布局 是典型的 CSS 布局问题，有着众多的解决方案。如果你不熟悉圣杯布局的历史，这篇文章 能够提供很好的总结，并给出了几个众所周知的解决方案。

圣杯布局由页头 (header)，中间部分 (center)，页脚 (footer)，和三栏组成。中间的一栏是主要内容，左边和右边提供如广告、导航的链接。

大部分的 CSS 解决方案都是以下列为目标：

不幸的是，这些自然的需求由于原生 CSS 的限制，当前经典的圣杯布局的解决方案都不能完美满足以上所有的要点。

有了 Flexbox 布局，终极的解决方案终于成为可能。

HTML 代码

<body class="HolyGrail">
    <header>…</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">…</main>
        <nav class="HolyGrail-nav">…</nav>
        <aside class="HolyGrail-ads">…</aside>
    </div>
    <footer>…</footer>
</body>

CSS 代码

让中间部分撑开并让页脚粘在底部的方法使用了 粘性页脚 中相同的技术。唯一的不同点是，圣杯布局的中间部分 (.HolyGrail-body) 需要指定 display:flex 来控制子元素的布局。

.HolyGrail {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.HolyGrail-body {
    display: flex;
    flex: 1;
}

制造三个等高的，流式居中，定宽的边栏很简单：

.HolyGrail-content {
    flex: 1;
}

.HolyGrail-nav,
.HolyGrail-ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
}

.HolyGrail-nav {
    /* put the nav on the left */
    order: -1;
}

响应式

圣杯布局来自于每个人都使用个人计算机冲浪的互联网时期的网页设计，但是随着移动设备的激增，圣杯布局已渐渐没落。

另一方面，使用 Flexbox 布局，创建一个移动设备优先和移动设备友好版本的圣杯布局很简单。其主旨就是把中间的部分默认指定为 flex-direction:column ，然后为拥有更宽屏幕的设备指定 flex-direction:row 。

这里是一个完整版的移动式被优先响应式示例。你可以调整浏览器大小来查看效果。

.HolyGrail,
.HolyGrail-body {
    display: flex;
    flex-direction: column;
}

.HolyGrail-nav {
    order: -1;
}

@media (min-width: 768px) {
    .HolyGrail-body {
        flex-direction: row;
        flex: 1;
    }
    .HolyGrail-content {
        flex: 1;
    }
    .HolyGrail-nav,
    .HolyGrail-ads {
        /* 12em is the width of the columns */
        flex: 0 0 12em;
    }
}

在 Github 中查看这个 demo 中完整的圣杯组件 源代码