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