CSS3实现“圣杯布局”--（固比固布局）

使用CSS3中的属性order可以轻易实现“圣杯布局”，实现伸缩项目的顺序重组，还有！！！使用flex属性实现了中间列的等高效果，以及页脚的黏附效果。

HTML:

  <header>header</header>
  <section>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
  </section>
  <footer>footer</footer>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
    html,
    body{ height:100%;color:#fff; }
    body{ min-width:100%; display:-webkit-flex; display:flex; -webkit-flex-flow:column wrap; flex-flow:column wrap; -webkit-justify-content:start; justify-content:start; }
    header,
    section,
    nav,
    aside,
    footer{ display:block; }
    header{ background-color: red; min-height:100px; padding:10px 20px; widht:100%; -webkit-order:1; }
    section{ min-width:100%; margin:20px 0; display:-webkit-flex; -webkit-order:2; -webkit-flex:1; }
    nav{ background-color: #ccc; padding:1%; width:220px; -webkit-order:1; }
    article{ background-color:blue; padding:1%; margin-left:2%; margin-right:2%; -webkit-flex:1; -webkit-order:2; }
    aside{ background-color: green; padding:1%; width:220px; -webkit-order:3; }
    footer{ background-color: #e5e5e5; min-height: 60px; min-width:100%; -webkit-order:3; }

效果图: