圣杯布局

作者: 喵星汪汪 | 来源:发表于2017-02-16 09:10 被阅读13次

实现三栏布局的六种方式
CSS 经典三列布局之圣杯布局
经典CSS布局：双飞翼和圣杯布局
圣杯布局和双飞翼布局
圣杯布局
flex布局及常用属性
实现两边定宽，中间自适应
CSS布局分类
CSS 布局
圣杯布局和双飞翼布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>圣杯布局</title>
        <style media="screen">
        .HolyGrail {
                margin: 0;
                display: flex;
                min-height: 100vh;
                flex-direction: column;
            }

            header,
            footer {
                background: red;
                flex: 1;
            }

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

            .HolyGrail-content {
                flex: 1;
            }

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

            .HolyGrail-nav {
            /* 导航放到最左边 */
                order: -1;
            }
            /*如果是小屏幕，躯干的三栏自动变为垂直叠加。*/
            @media (max-width: 768px) {
              .HolyGrail-body {
                flex-direction: column;
                flex: 1;
              }
              .HolyGrail-nav,
              .HolyGrail-ads,
              .HolyGrail-content {
                flex: auto;
              }
            }
        </style>
    </head>
    <body class="HolyGrail">
      <header>头部</header>
      <div class="HolyGrail-body">

          <main class="HolyGrail-content" style="background: blue;">中</main>
          <nav class="HolyGrail-nav" style="background: orange;">左</nav>
          <aside class="HolyGrail-ads"  style="background: gray;">右</aside>
      </div>
      <footer>底部</footer>
    </body>
</html>