使用flex布局实现圣杯布局以及双飞翼布局

使用flex布局实现圣杯布局以及双飞翼布局

圣杯布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

效果图

<div id="parent">
    <div class="child1">标题栏</div>
    <div class="child2">
        <div class="child4">左侧导航栏</div>
        <div class="child5">主内容</div>
        <div class="child6">右边导航栏</div>
    </div>
    <div class="child3">底部导航栏</div>
</div>

给我们的父元素也就是parent开启我们的flex布局，让里面的子元素按照主轴方向垂直从上到下排列
然后再给我们的child2开启flex，并且设置flex：1让他可以自适应宽度，再给里面的child5设置flex：1让他可以自适应宽度。

<style>
        body,html{
            height: 100%;
        }
        #parent{
            height:100%;
            background-color:#36e;
            display: flex;
            flex-direction: column;
        }
        div.child1{
            height: 100px;
            background-color: yellow;
        }
        div.child2{
            flex:1;
            background-color: #0f0;
            display: flex;
        }
        div.child3{
            height: 100px;
            background-color: red;
        }
        div.child4{
            width: 100px;
            background-color: #f3f;
        }
        div.child5{
            flex:1;
            background-color:lightgreen;
        }
        div.child6{
            width: 100px;
            background-color: aqua;
        }
    </style>

双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。
圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。

效果图

<div class="container">
  <div class="mid">mid</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

双飞翼模型一般把内容部分，即mid，放在第一个定义，可以使得在dom树构建时先加载内容部分，用户体验更好。

  <style>
    body,html{
      height: 100%;
    }
    .container{
      display: flex;
    }
    .mid{
      flex: 1;
      order: 2;
      background-color: red;

    }
    .left{
      width: 200px;
      order: 1;
      background-color: lime;
    }
    .right{
      width: 200px;
      order: 3;
      background-color: #3366ee;
    }
  </style>