css經常使用佈局整理

·百分比佈局

<div class="Grid">
  <div class="Grid-cell u-1of4">左...</div>
  <div class="Grid-cell u-1of2">中...</div>
  <div class="Grid-cell u-1of3">右...</div>
</div>
.Grid {
    display: flex;
    text-align: left;
    .Grid-cell {
      flex: 1;
    }
    .Grid-cell.u-full {
      flex: 0 0 100%;
    }
    .Grid-cell.u-1of2 {
      flex: 0 0 50%;
      background: orange;
    }
    .Grid-cell.u-1of3 {
      flex: 0 0 33.3333%;
      background: aquamarine;
    }
    .Grid-cell.u-1of4 {
      flex: 0 0 25%;
      background: beige;
    }
  }

·聖盃佈局

<div class="HolyGrail">
      <!--佔滿屏-->
      <header>#頭部</header>
      <div class="HolyGrail-body">
        <main class="HolyGrail-content">#中間內容</main>
        <nav class="HolyGrail-nav">#左側導航</nav>
        <aside class="HolyGrail-ads">#右側廣告</aside>
      </div>
      <footer>#底部</footer>
</div>
//聖盃佈局
    .HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      header,
      footer {
        flex: 1;
        background: #ddd;
      }
      .HolyGrail-body {
        display: flex;
        flex: 1;
      }
      .HolyGrail-content {
        flex: 1;
        background: orangered;
      }
      .HolyGrail-nav, .HolyGrail-ads {
        /* 兩個邊欄的寬度設爲12em */
        flex: 0 0 12em;
      }
      .HolyGrail-nav {
        /* 導航放到最左邊 */
        order: -1;
        background: beige;
      }
      .HolyGrail-ads {
        background: antiquewhite;
        flex: 0 0 12em;
      }
    }
//聖盃佈局，若是是小屏幕，軀幹的三欄自動變爲垂直疊加。
  @media (max-width: 768px) {
    .HolyGrail-body {
      flex-direction: column;
      flex: 1;
    }
    .HolyGrail-nav,
    .HolyGrail-ads,
    .HolyGrail-content {
      flex: auto;
    }
  }

·百分比佈局

<div class="Grid">
      <div class="Grid-cell u-1of4">左...</div>
      <div class="Grid-cell u-1of2">中...</div>
      <div class="Grid-cell u-1of3">右...</div>
</div>
//百分比佈局
    .Grid {
      display: flex;
      text-align: left;
      .Grid-cell {
        flex: 1;
      }
      .Grid-cell.u-full {
        flex: 0 0 100%;
      }
      .Grid-cell.u-1of2 {
        flex: 0 0 50%;
        background: orange;
      }
      .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
        background: aquamarine;
      }
      .Grid-cell.u-1of4 {
        flex: 0 0 25%;
        background: beige;
      }
    }

·輸入框佈局

<div class="InputAddOn">
      <span class="InputAddOn-item">圖標</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">按鈕</button>
</div>
//輸入框佈局
    .InputAddOn {
      display: flex;
      .InputAddOn-field {
        flex: 1;
      }
    }

·懸掛式佈局

<div class="Media">
      <img class="Media-figure" src="../assets/logo.png" alt="">
      <p class="Media-body">使用sublime好長時間了，但從接觸vue後，出現了一個問題一直困擾着我，找了好多辦法仍然無解，我不得不放棄它。最近在家養病，閒來無事，終於解決了這個bug。 sublime安裝插件的步驟在這就不贅述了，有太多大神已經寫的很詳細了，下面直接上問題圖</p>
</div>
//懸掛式佈局
    .Media {
      display: flex;
      align-items: flex-start;
      .Media-figure {
        margin-right: 1em;
      }
      .Media-body {
        flex: 1;
      }
    }