圣杯布局-ryf

之前写过圣杯布局，三栏布局。今天在flex实战-阮一峰社区发现一个更好的方法。

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局ryf</title>
    <style type="text/css">
        .HOlyGrail{
            display: flex;
            min-height:100vh;  /*相当于视窗的高度，视窗被均分为100单位的vh*/
            flex-direction: column; /*主轴在垂直方向，起点在上沿*/
        }
        header,footer{
            flex:1;
            background:slategray;
        }
        .HolyGrail-body{
            display:flex;
            flex: 1;
        }
        .HolyGrail-content{
            flex:1;
            background:rebeccapurple;
        }
        .HolyGrail-nav,.HolyGrail-ads{
             /*两栏边框的宽度设为12em*/
             flex: 0 0 12em;/*。。https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex。。。*/
            background:seagreen;
         }
        .HolyGrail-nav{
            /*导航放在最左边*/
            order: -1;
            /*设置或检索弹性盒模型对象的子元素出现的顺序 https://developer.mozilla.org/zh-CN/docs/Web/CSS/order 。。。*/
        }
        /*如果是小屏幕，躯干的三栏布局变为垂直叠加*/
        @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</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">content</main>
        <nav class="HolyGrail-nav">nav</nav>
        <aside class="HolyGrail-ads">aside</aside>
    </div>
    <footer>footer</footer>
</body>
</html>
posted @ 2019-02-14 11:21  流年-木木  阅读(174)  评论(0)    收藏  举报