使用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;
    }

效果圖: