這篇文章重點介紹一些強大的 css 代碼片段，用它們可以執行一些繁重的布局編程工作，還能幫助我們構建強大的新式CSS布局。

這里我們會介紹10 種新式 CSS 布局和大小調整技術，突出了單行CSS樣式代碼的強大和影響力。如果你在自己項目里面會使用Grid/Flexbox進行網站布局的話，相信這10個一行 CSS 代碼的新式布局對你應該很有用，建議收藏呢！

知識回顧

flexbox布局

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

grid布局

作用在"容器"（container）

grid-template-columns屬性定義每一列的列寬
grid-template-rows屬性定義每一行的行高

repeat()簡化重復的值，如下：

  grid-template-columns: 33.33% 33.33% 33.33%;
  
  /**等價于**/

  grid-template-columns: repeat(3, 33.33%);

repeat()接受兩個參數，第一個參數是重復的次數（上例是3），第二個參數是所要重復的值。

repeat()重復某種模式也是可以的。

/*定義了6列，第一列和第四列的寬度為100px，第二列和第五列為20px，第三列和第六列為80px*/
grid-template-columns: repeat(2, 100px 20px 80px);

auto-fill與auto-fit

auto-fill單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納盡可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。

grid-template-columns: repeat(auto-fill, 100px);

fr表示比例關系，

/*二等分等寬的兩列*/
grid-template-columns: 1fr 1fr;
/*第一列的寬度為150像素，第二列的寬度是第三列的一半*/
grid-template-columns: 150px 1fr 2fr;

minmax()函數產生一個長度范圍，表示長度就在這個范圍之中。它接受兩個參數，分別為最小值和最大值。

/*表示列寬不小于100px，不大于1fr*/
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto瀏覽器自己決定寬度

grid-template-columns: 100px auto 100px;

作用在"項目"（item）

justify-items屬性設置單元格內容的水平位置（左中右），align-items屬性設置單元格內容的垂直位置（上中下）place-items屬性是align-items屬性和justify-items屬性的合并簡寫。

span表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格

/*項目的左邊框距離右邊框跨越2個網格*/
grid-column-start: span 2;
grid-column-end: span 2;

.item-1 {
  background: #b03532;
  /*1~3個網格*/
  grid-column: 1 / 3; 
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  /*1開始，跨越2個網格*/
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

更多相關Grid布局，可以學習CSS Grid 網格布局教程

一行css現代布局

1、超級居中（Super Centered）


  <div class="parent blue" >
    <div class="box coral" contenteditable>
      :)
    </div>
  </div>

  .parent {
    display: grid;
    /*等價于align-items和justify-items都設置為center*/
    place-items: center;
  }

2、可解構的自適應布局（The Deconstructed Pancake）

關于flex，前置知識有一定的介紹。

 <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
 </div>

 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
  }

3、經典的側邊欄

同樣使用 grid layout，可以結合 minmax() 實現彈性的 sidebar（這在你要適應大屏幕的時候很有用）。minmax(,) 就是字面意思。結合單位，非常優雅，避免了數學計算寬度等不靈活的手段（比如我們設置 gap 的時候）。

 <div class="parent">
    <div class="section yellow" contenteditable>
      Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

.parent {
    display: grid;
    /分兩列，一列最小150px,最大占比25%， 一列自適應*/
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

，

4、固定的header 和 footer

固定高度的 header 和 footer，占據剩余空間的 body 是經常使用的布局，我們可以利用 grid 和 fr 單位完美實現。

  <div class="parent">
    <header class="blue section" contenteditable>Header</header>
    <main class="coral section" contenteditable>Main</main>
    <footer class="purple section" contenteditable>Footer Content</footer>
  </div>

  .parent {
    display: grid;
    /* 分三行，1，3行auto，2行自適應 */
    grid-template-rows: auto 1fr auto;
  }

5、經典的圣杯布局（古典圣杯布局）

可以輕松的使用 Grid 布局來實現圣杯布局，并且是彈性的。

<div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
  </div>


  .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  
  header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

  .left-side {
    grid-column: 1 / 2;
  }

  main {
    grid-column: 2 / 3;
  }

  .right-side {
    grid-column: 3 / 4;
  }

  footer {
    grid-column: 1 / 4;
  }

6、有意思的疊塊

<div class="parent white">
    <div class="span-12 green section">Span 12</div>
    <div class="span-6 coral section">Span 6</div>
    <div class="span-4 blue section">Span 4</div>
    <div class="span-2 yellow section">Span 2</div>
  </div>

.parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .span-12 {
    grid-column: 1 / span 12;
  }

  .span-6 {
    grid-column: 1 / span 6;
  }

  .span-4 {
    grid-column: 4 / span 4;
  }

  .span-2 {
    grid-column: 3 / span 2;
  }

  /* centering text */
  .section {
    display: grid;
    place-items: center;
    text-align: center
  }

可以使用該repeat()功能在 CSS 中快速編寫網格。使用：repeat(12, 1fr),對于網格模板，將會為你提供 12 列1fr

使用span關鍵字。你可以設置起始線，然后設置從該起點跨越的列數。在這種情況下，grid-column: 1 / span 12將等價于grid-column: 1 / 13，grid-column: 2 / span 6將等價于grid-column: 2 / 8

7、RAM技巧

RAM，`repeat、auto-(fit|fill)和minmax()三個的簡寫，這在彈性布局圖片/box 這類非常有用(一行可以排放的卡片數量自動適應)。

<div class="parent white">
    <div class="box pink">1</div>
    <div class="box purple">2</div>
    <div class="box blue">3</div>
    <div class="box green">4</div>
  </div>

.parent {
    display: grid;
    grid-gap: 1rem;
    /*核心*/
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

當前寬度是 160px（不考慮 gap），那么上面四個 box 的寬度會自適應為 160px,并且分為 4 行
當前寬度是 310px （不考慮 gap），上面四個 box 分成兩行，兩個 box 平分寬度
當滿足一行放下 3 個box 時，第三個 box 自動到第一行
當滿足一行放下 4 個 box 時，第四個 box 自動到第一行

當我們將 auto-fit 改為 auto-fill:

8、卡片彈性適應

<div class="parent white">
    <div class="card yellow">
      <h3>Title - Card 1</h3>
      <p contenteditable>Medium length description with a few more words here.</p>
      <div class="visual pink"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 2</h3>
      <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
      <div class="visual blue"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 3</h3>
      <p contenteditable>Short Description.</p>
      <div class="visual green"></div>
    </div>
  </div>

 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
   /*核心*/
    grid-template-columns: repeat(3, 1fr);
  }

  .visual {
    height: 100px;
    width: 100%;
  }

  .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
  }

  h3 {
    margin: 0
  }

無論是寬度或高度的收縮還是延展，都可以完美的展現 card 的布局。

9、使用 clamp 實現 fluid typography

<div class="parent white">
    <div class="card purple">
      <h1>Title Here</h1>
      <div class="visual yellow"></div>
      <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

 .parent {
    display: grid;
    place-items: center;
  }

  .card {
    /*核心*/
    width: clamp(23ch, 50%, 46ch);
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .visual {
      height: 125px;
      width: 100%;
    }

使用最新的 clamp() 方法可以一行實現 fluid typography。提高 UX，非常適合包含閱讀內容的 card，因為我們不希望一行字太短或太長。

10、完美實現比例

aspect-ratio屬性，當我調整卡片的大小時，綠色的視覺塊會保持這個 16 x 9 的縱橫比。長寬比由于aspect-ratio屬性而固定設置為: 16 / 9。


  <div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive text for aspect ratio card demo.</p>
    </div>
  </div>

  .parent {
    display: grid;
    place-items: center;
  }

  .visual {
    /*核心*/
    aspect-ratio: 16 / 9;
  }

  .card {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

在展現 CMS 或其他設計內容時，我們會期望圖片、video、卡片能夠按照固定的比例進行布局。而最新的 aspect-ratio 就能優雅的實現該功能(使用 chrome 84+)