flex布局案例-圣杯布局
        
 可用
F12开发者工具查看元素及样式,可打开 codepen 在线编辑代码。
参考:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)
编辑  (opens new window)
  上次更新: 2025/10/09, 07:47:31
 神族九帝's blog 可用
F12开发者工具查看元素及样式,可打开 codepen 在线编辑代码。
<html>
  <div class="HolyGrail">
    <header>#header</header>
    <div class="wrap">
      <nav class="left">left 宽度固定200px</nav>
      <main class="content">center 宽度自适应</main>
      <aside class="right">right 宽度固定200px</aside>
    </div>
    <footer>#footer</footer>
  </div>
</html>
<style>
  .HolyGrail {
    text-align: center;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
  }
  .HolyGrail .wrap {
    display: flex;
    flex: 1;
  }
  .HolyGrail .content {
    background: #eee;
    flex: 1;
  }
  .HolyGrail .left,
  .HolyGrail .right {
    background: lightgreen;
    flex: 0 0 200px;
  }
  .HolyGrail header,
  .HolyGrail footer {
    background: #999;
    height: 50px;
    line-height: 50px;
  }
  .HolyGrail .left {
    background: salmon;
  }
</style>
参考:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)