自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

如何用一行CSS分別實現(xiàn)十種現(xiàn)代布局

作者：Tong
開發(fā) 前端
周日在家看web.dev的2020三天live，發(fā)現(xiàn)太多有意思的東西，其中有一項是關(guān)于CSS的，主播是Una Kravets（chrome team成員）了，不過以前的底子還在（有興趣的的可以看我一年前發(fā)布）關(guān)于CSS的東西。

 

前言

周日在家看web.dev的2020三天live，發(fā)現(xiàn)太多有意思的東西，其中有一項是關(guān)于CSS的，主播是Una Kravets（chrome team成員）了，不過以前的底子還在（有興趣的的可以看我一年前發(fā)布）關(guān)于CSS的東西，雖然由于太過沒沒啥人愿意看，sad）。

01、超級小中

在沒有和flex grid之前，垂直居中一直不能很優(yōu)雅的實現(xiàn)。而現(xiàn)在，可以結(jié)合我們 grid 和 place-items 優(yōu)雅的實現(xiàn)同時 水平居中 和 垂直居中 。

  1. <div class="parent blue" > 
  2.   <div class="box coral" contenteditable> 
  3.     :) 
  4.   </div> 

 

  1. .ex1 .parent { 
  2.   display: grid; 
  3.   place-items: center; 
  4. } 

源碼地址：https://codepen.io/una/pen/YzyYbBx

02、可解構(gòu)的自適應(yīng)布局（The Deconstructed Pancake）

flex: 0 1 <baseWidth>

這種布局經(jīng)常出現(xiàn)在電的網(wǎng)站：

  1. 在視口足夠的時候，三個框固定寬度橫放

  2. 在視口不夠的時候（寬度在移動上面），寬度仍然固定，，但是自動解構(gòu)（原諒我的中文水平），不在同一水平面上

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

 

  1. .ex2 .parent { 
  2.   display: flex; 
  3.   flex-wrap: wrap; 
  4.   justify-content: center; 
  5. } 
  6.  
  7. .ex2 .box { 
  8.   flex: 1 1 150px; /*  flex-grow: 1 ，表示自動延展到最大寬度 */ 
  9.   flex: 0 1 150px; /*  No stretching: */ 
  10.   margin: 5px; 
  11. } 

當(dāng)我們設(shè)置 flex: 1 1 150px; 時候：

源碼 地址：https://codepen.io/una/pen/WNQdBza

03、經(jīng)典的側(cè)邊欄

grid-template-columns: minmax(<min>, <max>) ...

同樣使用 grid 布局，結(jié)合可以 minmax() 實現(xiàn)彈性的的這在你要適應(yīng)大屏幕的時候很有用）。 minmax(<min>, <max>) 就是字面意思。結(jié)合 <flex> 單位，非常優(yōu)雅，避免了數(shù)學(xué)計算寬度等不靈活的手段（的我們設(shè)置間隙手段時候）。

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

 

  1. .ex3 .parent { 
  2.    display: grid; 
  3.    grid-template-columns: minmax(150px, 25%) 1fr; 
  4.  } 

源碼 地址：https://codepen.io/una/pen/gOaNeWL

04、固定的頁眉和頁腳

grid-template-rows: auto 1fr auto

固定高度的頁眉和頁腳，并保留剩余空間的主體是經(jīng)常使用的布局，我們可以利用 grid 和 fr 單位完子實現(xiàn)。

  1. <div class="parent"> 
  2.   <header class="blue section" contenteditable>Header</header> 
  3.   <main class="coral section" contenteditable>Main</main> 
  4.   <footer class="purple section" contenteditable>Footer Content</footer> 
  5. </div> 

 

  1. .ex4 .parent { 
  2.     display: grid; 
  3.     grid-template-rows: auto 1fr auto; 
  4.   } 

源碼 地址：https://codepen.io/una/pen/bGVXPWB

05、經(jīng)典的圣杯布局（古典圣杯布局）

grid-template: auto 1fr auto / auto 1fr auto

我們可以輕松地使用網(wǎng)格布局來實現(xiàn)圣杯布局，并且是彈性的。

  1. <div class="parent"> 
  2.     <header class="pink section">Header</header> 
  3.     <div class="left-side blue section" contenteditable>Left Sidebar</div> 
  4.     <main class="section coral" contenteditable> Main Content</main> 
  5.     <div class="right-side yellow section" contenteditable>Right Sidebar</div> 
  6.     <footer class="green section">Footer</footer> 
  7.   </div> 

 

  1. .ex5 .parent { 
  2.    display: grid; 
  3.    grid-template: auto 1fr auto / auto 1fr auto; 
  4.  } 
  5.  
  6.  .ex5 header { 
  7.    padding: 2rem; 
  8.    grid-column: 1 / 4; 
  9.  } 
  10.  
  11.  .ex5 .left-side { 
  12.    grid-column: 1 / 2; 
  13.  } 
  14.  
  15.  .ex5 main { 
  16.    grid-column: 2 / 3; 
  17.  } 
  18.  
  19.  .ex5 .right-side { 
  20.    grid-column: 3 / 4; 
  21.  } 
  22.  
  23.  .ex5 footer { 
  24.    grid-column: 1 / 4; 
  25.  } 

源碼 地址：https://codepen.io/una/pen/mdVbdBy

06、有意思的的疊塊

使用 grid-template-columns 狀語從句： grid-column 可以實現(xiàn)如下圖產(chǎn)品所示的布局。說明進一步了 repeat 狀語從句： fr 的便捷性。

源碼 地址：https://codepen.io/una/pen/eYJOYjj

07、RAM技巧

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

這在彈性布局 圖片/ box 這種非常有用（行可以排放的卡片數(shù)量自動適應(yīng)）。

  1. .ex7 .parent { 
  2.    display: grid; 
  3.    grid-gap: 1rem; 
  4.    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  5.  } 

 

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

其效果是如果確保能夠滿足多個盒的最小寬度（例如上面的 150px ），則自動彈性適應(yīng)放置多行。

  1. 當(dāng)前寬度是 160px （不考慮gap），那么上面四個 box 的寬度會適應(yīng)為 160px ，并且分為4行
  2. 當(dāng)前寬度是 310px （不考慮間隙），上面四個 box 分段兩行，兩個 box 平分寬度

  3. 當(dāng)滿足滿足一行放下3個box時，第三個box自動到第一行

  4. 當(dāng)滿足滿足一行放下4個box時，第四個box自動到第一行

我們?nèi)绻麑?nbsp;auto-fit 對劃線 auto-fill ：

源碼 地址：https://codepen.io/una/pen/oNbvNQv

08、卡片彈性適應(yīng)性

justify-content: space-between ，結(jié)合 grid 和 flex 實現(xiàn)完的布局。

  1. <div class="parent white"> 
  2.     <div class="card yellow"> 
  3.       <h3>Title - Card 1</h3> 
  4.       <p contenteditable>Medium length description with a few more words here.</p> 
  5.       <div class="visual pink"></div> 
  6.     </div> 
  7.     <div class="card yellow"> 
  8.       <h3>Title - Card 2</h3> 
  9.       <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p> 
  10.       <div class="visual blue"></div> 
  11.     </div> 
  12.     <div class="card yellow"> 
  13.       <h3>Title - Card 3</h3> 
  14.       <p contenteditable>Short Description.</p> 
  15.       <div class="visual green"></div> 
  16.     </div> 
  17.   </div> 

 

  1. .ex8 .parent { 
  2.    height: auto; 
  3.    display: grid; 
  4.    grid-gap: 1rem; 
  5.    grid-template-columns: repeat(3, 1fr); 
  6.  } 
  7.  
  8.  .ex8 .visual { 
  9.    height: 100px; 
  10.    width: 100%; 
  11.  } 
  12.  
  13.  .ex8 .card { 
  14.    display: flex; 
  15.    flex-direction: column; 
  16.    padding: 1rem; 
  17.    justify-content: space-between; 
  18.  } 
  19.  
  20.  .ex8 h3 { 
  21.    margin: 0 
  22.  } 

無論是寬度或高度的收縮還是延展，，都可以完子的展現(xiàn)卡的布局。

地址：https://codepen.io/una/pen/ExPYomq

09、使用夾具實現(xiàn)流體印刷

clamp(<min>, <actual>, <max>)

最新使用的 clamp() 方法可以一行實現(xiàn)流體排版。提高UX，非常適合包含閱讀內(nèi)容的卡，因為我們不希望一行字太短或太長。

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

 

  1. .ex9 .parent { 
  2.    display: grid; 
  3.    place-items: center; 
  4.  } 
  5.  
  6.  .ex9 .card { 
  7.    width: clamp(23ch, 50%, 46ch); 
  8.    display: flex; 
  9.    flex-direction: column; 
  10.    padding: 1rem; 
  11.  } 
  12.  
  13.  .ex9 .visual { 
  14.      height: 125px; 
  15.      width: 100%; 
  16.    } 

源碼 地址：https://codepen.io/una/pen/QWyLxaL

10、完

aspect-ratio: <width> / <height>

在展現(xiàn)CMS或其他設(shè)計內(nèi)容時，我們會期待圖片，視頻，卡片能夠按照固定的比例進行布局。而最新的 aspect-ratio 可以優(yōu)雅的實現(xiàn)該功能（使用chrome 84+）

  1. <div class="parent white"> 
  2.     <div class="card blue"> 
  3.       <h1>Video Title</h1> 
  4.       <div class="visual green"></div> 
  5.       <p>Descriptive Text. This demo works in Chromium 84+.</p> 
  6.     </div> 
  7.   </div> 

 

  1. .ex10 .parent { 
  2.    display: grid; 
  3.    place-items: center; 
  4.  } 
  5.  
  6.  .ex10 .visual { 
  7.    aspect-ratio: 16 / 9; 
  8.  } 
  9.  
  10.  .ex10 .card { 
  11.    width: 50%; 
  12.    display: flex; 
  13.    flex-direction: column; 
  14.    padding: 1rem; 
  15.  } 

源碼 地址：https://codepen.io/una/pen/xxZKzaX

 

責(zé)任編輯：張燕妮 來源： 三分鐘學(xué)前端
開發(fā)CSS代碼
相關(guān)推薦

2022-05-03 17:04:08

CSS前端

2023-09-21 15:10:55

2024-02-19 07:52:40

CSSJS屬性

2025-01-20 08:35:53

2024-12-03 09:23:20

2020-07-20 09:20:48

代碼geventPython

2023-05-15 15:29:13

設(shè)計模式JavaScript

2025-04-24 08:50:00

軟件架構(gòu)架構(gòu)軟件系統(tǒng)

2024-11-13 13:20:44

2010-09-07 13:12:17

2022-05-31 09:36:18

JDKDelayQueueRedis

2022-04-09 09:11:33

Python

2024-11-20 07:00:00

代碼數(shù)據(jù)清洗Python

2024-11-29 10:58:54

CSS代碼黑模式

2018-09-25 23:21:13

2010-07-16 16:45:56

職場培訓(xùn)

2010-09-13 17:17:04

2024-08-22 08:54:40

2010-07-07 11:30:16

UML十種圖

2020-08-13 07:00:00

工具技術(shù)管理
點贊
收藏

51CTO技術(shù)棧公眾號