圣杯布局
圣杯布局 是典型的 CSS 布局问题，有着众多的解决方案。如果你不熟悉圣杯布局的历史，这篇文章 能够提供很好的总结，并给出了几个众所周知的解决方案。
圣杯布局由页头 (header)，中间部分 (center)，页脚 (footer)，和三栏组成。中间的一栏是主要内容，左边和右边提供如广告、导航的链接。
大部分的 CSS 解决方案都是以下列为目标：
- 边栏应流动居中，定宽。
- 中间一栏 (主要内容) 在 HTML 源码中应该首先元素出现。
- 所有栏同高，忽略实际高度。
- 使用的 HTML 标记尽量少。
- 当页面内容不够充满页面时，页脚应“粘”在底部。
不幸的是，这些自然的需求由于原生 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;
}