display:flex 好用的特性值

CSS3 裡面在版面配置中，提供了最新 display:flex 裡面可用的參數屬性相當多，今天無意中發現了比較不同的東西，在這裡記錄下來供大家參考:

HTML:

<section class="sn">
  <header>Header</header>
  <main>Main</header>
  <nav>Nav</nav>
  <footer>H</footer>
</section>

CSS:

  section{
         display: flex;
         flex-wrap: wrap;  // 支援 flex 自動換行
  }

  section > * {
    padding: 1em;
    box-sizing: border-box;  // 使用 border-box 模式
  }

  header{
      flex-basis: 100%;    //  佔滿一整行
      order: 1;                   //   order 用來顯示呈現畫面的順序，序號由 1 開始
  }

  main{
      flex-grow: 1;    //  讓 main 佔據  1/4 (4 是由 main & nav 合起來計算)
      order: 2;
  }

  nav{
       flex-grow: 3;    //  讓 nav 佔據  3/4 (4 是由 main & nav 合起來計算)
      order: 3;
 }

 footer{
      flex-basis: 100%;
      order: 4;
}