如何用一行 CSS 實現 10 種現代布局?

2021-12-29 前端有道

這篇文章重點介紹一些強大的 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+)

參考資料 
Flex 布局教程：語法篇
CSS Grid 網格布局教程
Ten modern layouts in one line of CSS

相關焦點

  • 如何用一行CSS分別實現10種現代布局?
    同樣使用grid布局，結合可以minmax()實現彈性的的這在你要適應大屏幕的時候很有用）。minmax(<min>, <max>)就是字面意思。結合<flex>單位，非常優雅，避免了數學計算寬度等不靈活的手段（的我們設置間隙手段時候）。
  • 【常用整理】CSS布局方案大全
    我們在日常開發中經常遇到布局問題，下面羅列幾種常用的css布局方案話不多說，上代碼！
  • CSS 新版網格布局簡述
    網格布局CSS 網格是一個用於 web 的二維布局系統。利用網格，你可以把內容按照行與列的格式進行排版。另外，網格還能非常輕鬆地實現一些複雜的布局。網格是由一系列水平及垂直的線構成的以一種布局模式。然後我們對css規則做點改變，來了解網格是如何工作的。首先，將容器的display屬性設置為grid來定義一個網絡。
  • CSS各種姿勢實現Sticky Footer
    給內容外增加父元素，並讓內容部分的底部內邊距與頁腳高度的值相等。<body>  <div class="content">    <div class="content-inside">      content    </div>  </div>  <footer class="footer
  • 教程 | Web前端教程2:CSS+DIV頁面布局
    （2）使用 <div> 元素的 HTML 布局注釋：<div> 元素常用作布局工具，因為能夠輕鬆地通過 CSS 對其進行定位。參考3school有關div內容學習div+css界面布局得知識。
  • CSS現狀和如何學習
    在CSS中，格式化上下文有很多種，除了大家熟悉的 BFC 、 IFC 之外還有由Flexbox布局創建的 FFC 和Grid布局創建 GFC 等。這些統稱為CSS 格式化上下文 ，也被稱作 視覺格式化模型 。而CSS視覺格式化模型是用來處理文檔並將它顯示在視覺媒體上的機制。簡單地說， 就是用來控制盒子的位置，即實現頁面的布局 。
  • 使用CSS技術實現Netflix Logo動畫效果
    我嘗試使用 Netflix（譯者註：一家在線影片租賃提供商）時，立即就把我吸引住了。我觀看了一些不得不在它處才能觀看的節目。每一集電視劇或者電影都以 Netflix 動畫作為開始。在觀看了幾集電視劇之後，我想到可以用 CSS 來實現 Netflix 的 logo 動畫，於是我看了幾部作品之後，就用 CodePen 來重現這個 logo。
  • 純CSS實現常見的UI效果
    在此之前在用純CSS實現這些效果之前，筆者先介紹幾個常用的SCSS Mixin和一個得力武器，用它們來進行創作將會事半功倍覆蓋 - cover@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) { position
  • 前端進階:css必知的幾個底層知識和技巧
    在介紹完問題學習法之後，進入我們今天的主題，接下來我會介紹css的一些底層的知識的現象，藉此來讓大家對css有更深入的理解。一.css尺寸1.首選最小寬度–實現複雜圖形效果在css中，圖片和文字的權重遠大於布局，因此當width:0時表現出來的寬度就是「首選最小寬度」。中文的最小寬度為每個漢字的寬度，西方文字取決於連續的英文字符單元。
  • 可愛極了,用 CSS 實現一個超可愛的貓咪!
    然後，在圓圈裡面我們放太陽div.sun，雲朵div.cloud，貓div.cat，當然貓裡面還有眼睛鼻子嘴巴這些，至於貓的耳朵就用兩個偽類做個三角形去實現。絕大部分都是css基礎代碼來實現的。唯一可以注意的點，就是耳朵這個三角形，我們是通過偽類實現，將它不設置寬高，而主是通過border-width+boder-color這個技巧去繪製出三角形的，算是個css小技巧吧，後面的鼻子和嘴巴裡的尖牙都是這個小技巧來實現的。
  • 巧用CSS cross-fade(.)實現背景圖像半透明效果
    前段時間有挺火的一個小遊戲，拿兩張圖片疊加在一起，看看複合人物的效果，用css怎麼實現呢？可能大部分人想到的是將兩個img用定位的方式疊加在一起，分別設置透明度，當然這個辦法是可行的，其實css還提供了一個cross-fade()方法，講兩張圖片作為背景圖引入，可以實現相同的效果。
  • 【原創】 實戰div css網頁布局
    5、通過css控制面板，對每個層進行定義，如它們的寬、高，邊框、背景、填充、邊界等。定義的時候，必須定義左浮動。 在我們通過css來定義div的時候，這個地方一定要對應。 比如要定義這個<div id="logo"></div>我們點擊右上角css樣式屬性裡的「+」圖標（如下圖）
  • Div+CSS 基礎入門教程
  • CSS 垂直居中的正確打開方式
    ;然後再用負的 margin-top 和 margin-left 來進行簡單的位移即可，因為現在的負 margin 是基於自身的高度和寬度來進行位移的。image-20210725020146492.png10. grid 網格布局 (一)grid 布局相信大家在實際項目中用的較少，主要是該布局實在是太超前，導致了兼容性不是那麼理想，但是不可否認的是
  • 你不知道的 CSS
    用 ~ / + 兄弟選擇器來美化表單元素css(3)中選擇器眾多，具體可參考CSS 選擇器參考手冊。不知什麼原因，在很多項目中，實現諸如單選，複選等（類似）功能（包括如圖標籤選擇器）時，為了美化其樣式，往往使用JS去實現，實際上，利用 label標籤和css的兄弟選擇器完全可以實現類似效果。其兼容性也並不差，至少兼容 IE8及其以上瀏覽器了。
  • HTML DIV+CSS 命名規範大全
    常用DIV+CSS命名大全集合，即CSS命名規則我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名才是好的方法。,style.css主要的module.css模塊base.css基本共用layout.css布局，版面themes.css主題columns.css專欄font.css文字、字體forms.css表單mend.css補丁print.css列印CSS命名其它說明：DIV+CSS命名小結：無論是使用「.」
  • 50道CSS基礎面試題(附答案)
    ，當瀏覽器的尺寸變化時會採用不同的屬性10 請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？第一種真正的品字：三塊高寬是確定的；上面那塊用margin: 0 auto;居中；下面兩塊用float或者inline-block不換行；用margin調整位置使他們居中。
  • DIV+CSS命名規範大全
    我們在開發CSS+DIV網頁的時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名
  • 巧用 CSS 實現動態線條 Loading 動畫
    我們知道，使用 CSS，我們可以非常輕鬆的實現這樣一個動畫效果：div {    width: 100px;    height: 100px;    border-radius: 50%;    border: 2px solid transparent;
  • 太厲害了,用 CSS 實現一隻自由飛翔的鳥兒
    ↓推薦關注↓🎄 前言前幾天在逛社區時，偶然發現一個非常賞心悅目得 小鳥飛翔效果，並且是純 css 實現的。這不由讓我大感驚奇， css 的世界可謂是淵博如海，讓人又愛又恨。下面用幾個例子帶大家學習 border 的渲染機制:設置 `div` 的 `width` 與 `height` 為 `0`，設置四個方向的 `border` 顏色不同。