Flex布局实例之圣杯布局

星妮

3 年前

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

HTML代码

<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">ads</aside>
    </div>
    <footer>footer</footer>
</body>

CSS代码

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}


header,
footer {
  background: #666666;
  height: 100px;
  /* flex: 1; */
}


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


.HolyGrail-content {
  flex: 1;
  background: #D6D6D6;
}


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


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

web前端工程师

答题时间：30min

#摸鱼专区#