圣杯级 Flexbox 布局🎃
圣杯布局(Holy Grail Layout)是一个众所周知的 CSS 问题,历史上曾出现过多种解决方案。如果您不了解圣杯布局的背景,A List Apart 的这篇文章提供了一个不错的概述,并链接到一些最知名的替代方案。
正如上图所示,圣杯布局的基本结构是一个包含页眉、页脚和三栏的页面。左右两栏用于放置导航或广告等补充内容,而中间一栏则用于放置主要文本。
遗憾的是,由于这些目标的性质和 CSS 的原始限制,针对此问题的任何传统补救措施都未能完全实现所有这些目标。
最后,借助 Flexbox 可以实现全面的解决方案。
HTML代码:
CSS代码:
您可以从这里访问代码。
文章来源:https://dev.to/ak_ram/holy-grail-flexbox-layout-3og7


