圣杯级 Flexbox 布局🎃

圣杯布局（Holy Grail Layout）是一个众所周知的 CSS 问题，历史上曾出现过多种解决方案。如果您不了解圣杯布局的背景，A List Apart 的这篇文章提供了一个不错的概述，并链接到一些最知名的替代方案。

正如上图所示，圣杯布局的基本结构是一个包含页眉、页脚和三栏的页面。左右两栏用于放置导航或广告等补充内容，而中间一栏则用于放置主要文本。

遗憾的是，由于这些目标的性质和 CSS 的原始限制，针对此问题的任何传统补救措施都未能完全实现所有这些目标。

最后，借助 Flexbox 可以实现全面的解决方案。

HTML代码：

CSS代码：

您可以从这里访问代码。