flex布局实例：圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>
    .holyGrail {
      display: flex;

      /* vh为相对于视口的高度。视口被均分为100vh。此处正好充满整个视口 */
      min-height: 100vh;

      /* 主轴方向改为垂直 */
      flex-direction: column;
    }

    header, footer {
      /* 头和尾固定高度10em */
      flex: 0 0 10em;
      background-color: darkgray;
      /*height: 3em;*/
    }

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

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

    .holyGail-content {
      flex: 1;
      background-color: yellowgreen;
    }

    .holyGrail-nav {
      /* 导航放到最左边。不管html怎样顺序，导航都在最左边。 */
      order: -1;
    }

    @media (max-width: 768px) {
      .holyGrail-body {
        flex-direction: column;
        flex: 1;
      }

      .holyGrail-nav, .holyGail-content, .holyGrail-ads {
        flex: 1;
      }
    }

  </style>
</head>
<body>
<h2>圣杯布局</h2>
<pre>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例</a></pre>
<p>圣杯布局是一种最常见的网页布局，从上到下有header,body,footer。body中有left（导航）.center（主栏）,right（侧栏）。</p>
<p>如果是小屏幕，躯干的三栏自动变为垂直叠加。</p>
<div class="holyGrail">
  <header>header</header>
  <div class="holyGrail-body">
    <main class="holyGail-content">content</main>
    <nav class="holyGrail-nav">nav</nav>
    <aside class="holyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</div>
</body>
</html>
flex布局实例：圣杯布局

猜你喜欢
