CSS3--Flex弹性盒子布局: 实例篇-圣杯布局

Posted Z && Y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3--Flex弹性盒子布局: 实例篇-圣杯布局相关的知识，希望对你有一定的参考价值。

01: 弹性盒子模型介绍 & 游览器调试样式（简单介绍）
02: 弹性布局和传统布局响应对比
03: 使用弹性盒子模型布局微信客户端
04: 声明弹性盒子 & 容器的属性
05: flex项目的属性
06: 实例篇-骰子布局
07: 实例篇-网格布局
08: 实例篇-圣杯布局
09: 实例篇-输入框的布局 & 悬挂式布局
10: 实例篇-固定的底栏 & 流式布局
11: CSS3 flex弹性布局重点

1.Flex弹性盒子布局: 实例篇-圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分
成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平
分成三栏，从左到右为：导航、主栏、副栏。

在这里插入图片描述

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 {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        header,
        footer {
            flex: 1;
            background-color: #ccc;
        }

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

        .HolyGrail-content {
            flex: 1;
            background-color: skyblue;
        }

        .HolyGrail-nav,
        .HolyGrail-ads {
            /* 两个边栏的宽度设为12em */
            flex: 0 0 12em;
            background-color: orange;
        }

        .HolyGrail-nav {
            /* 导航放到最左边 */
            order: -1;
        }

运行结果：
在这里插入图片描述

如果是小屏幕，躯干的三栏自动变为垂直叠加。
在上面的css代码添加以下代码：

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

在这里插入图片描述

以上是关于CSS3--Flex弹性盒子布局: 实例篇-圣杯布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS3--Flex弹性盒子布局: 实例篇-骰子布局

CSS3--Flex弹性盒子布局: flex项目的属性

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

CSS3--Flex弹性盒子布局: 实例篇-固定的底栏 & 流式布局

CSS3--Flex弹性盒子布局:弹性布局和传统布局响应对比

CSS3 flex弹性布局重点