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

新時代布局中一些有意思的特性！

作者：SbCoco
開發(fā) 前端
而在最近幾個 Chrome 版本中，有一些挺有意思的屬性相繼得到支持，本文就將介紹一下，在今天，新時代布局中，我們能逐漸去使用的一些有意思的新特性.

[[395182]]

在最新的 Chrome Canary 中，一個有意思的 CSS 語法 Container Queries 得到了支持。

Chrome Canary[1]：開發(fā)者專用的每日構(gòu)建版，站上網(wǎng)絡科技最前沿。當然，不一定穩(wěn)定~

而在最近幾個 Chrome 版本中，有一些挺有意思的屬性相繼得到支持，本文就將介紹一下，在今天，新時代布局中，我們能逐漸去使用的一些有意思的新特性，通過本文，你將能了解到：

  • flex 布局中的 gap 屬性
  • 控制容器寬高比屬性 aspect-ratio
  • firefox 下的 CSS Grid 瀑布流布局(grid-template-rows: masonry)
  • CSS 容器查詢(Container Queries)

flex 布局中的 gap 屬性

gap 并非是新的屬性，它一直存在于多欄布局 multi-column 與 grid 布局中，其中：

  • column-gap 屬性用來設置多欄布局 multi-column 中元素列之間的間隔大小
  • grid 布局中 gap 屬性是用來設置網(wǎng)格行與列之間的間隙，該屬性是 row-gap 和 column-gap 的簡寫形式，并且起初是叫 grid-gap

譬如我們有如下一個 grid 布局：

  1. <div class="grid-container"> 
  2.     <div class="item">1</div> 
  3.     <div class="item">2</div> 
  4.     <div class="item">3</div> 
  5.     <div class="item">4</div> 
  6.     <div class="item">5</div> 
  7. </div> 
  1. .grid-container { 
  2.     display: grid; 
  3.     border: 5px solid; 
  4.     padding: 20px; 
  5.     grid-template-columns: 1fr 1fr 1fr; 
  6. } 
  7. .item { 
  8.     width: 100px; 
  9.     height: 100px; 
  10.     background: deeppink; 
  11.     border: 2px solid #333; 
  12. } 

效果如下：

grid 布局

通過給 grid-container 添加 gap 屬性，可以非常方便的設置網(wǎng)格行與列之間的間隙：

  1. .grid-container { 
  2.     display: grid; 
  3.     border: 5px solid; 
  4.     padding: 20px; 
  5.     grid-template-columns: 1fr 1fr 1fr; 
  6. +   gap: 5px; 
  7. } 

而從 Chromium 84 開始，我們可以開始在 flex 布局中使用 gap 屬性了!Can i use -- gap property for Flexbox[2]

Can i use -- gap property for Flexbox

它的作用與在 grid 布局中的類似，可以控制水平和豎直方向上 flex item 之間的間距：

  1. .flex-container { 
  2.     width: 500px; 
  3.     display: flex; 
  4.     flex-wrap: wrap; 
  5.     gap: 5px; 
  6.     justify-content: center; 
  7.     border: 2px solid #333; 
  8. } 
  9.  
  10. .item { 
  11.     width: 80px; 
  12.     height: 100px; 
  13.     background: deeppink; 
  14. } 

gap 屬性的優(yōu)勢在于，它避免了傳統(tǒng)的使用 margin 的時候需要考慮第一個或者最后一個元素的左邊距或者右邊距的煩惱。正常而言，4 個水平的 flex item，它們就應該只有 3 個間隙。gap 只生效于兩個 flex item 之間。

控制容器寬高比屬性 aspect-ratio

保持元素容器一致的寬高比(稱為長寬比)對于響應式 Web 設計和在某些布局當中至關(guān)重要?，F(xiàn)在，通過 Chromium 88 和 Firefox 87，我們有了一種更直接的方法來控制元素的寬高比 -- aspect-ratio。Can i use -- aspect-ratio[3]

Can i use -- aspect-ratio

首先，我們只需要設定元素的寬，或者元素的高，再通過 aspect-ratio 屬性，即可以控制元素的整體寬高：

  1. <div class="width"></div> 
  2. <div class="height"></div> 
  1. div { 
  2.     background: deeppink; 
  3.     aspect-ratio: 1/1; 
  4. } 
  5. .width { 
  6.     width: 100px; 
  7. } 
  8. .height { 
  9.     height: 100px; 
  10. } 

都可以得到如下圖形：

其次，設定了 aspect-ratio 的元素，元素的高寬其中一個發(fā)生變化，另外一個會跟隨變化：

  1. <div class="container"> 
  2.     <div>寬高比1:1</div> 
  3.     <div>寬高比2:1</div> 
  4.     <div>寬高比3:1</div> 
  5. </div> 
  1. .container { 
  2.     display: flex; 
  3.     width: 30vw; 
  4.     padding: 20px; 
  5.     gap: 20px; 
  6. } 
  7. .container > div { 
  8.     flex-grow: 1; 
  9.     background: deeppink; 
  10. } 
  11. .container > div:nth-child(1) { 
  12.     aspect-ratio: 1/1; 
  13. } 
  14. .container > div:nth-child(2) { 
  15.     aspect-ratio: 2/1; 
  16. } 
  17. .container > div:nth-child(3) { 
  18.     aspect-ratio: 3/1; 
  19. } 

當容器大小變化，每個子元素的寬度變寬，元素的高度也隨著設定的 aspect-ratio 比例跟隨變化：

图片

CodePen Demo -- aspect-ratio Demo[4]

firefox 下的 CSS Grid 瀑布流布局(grid-template-rows: masonry)

grid-template-rows: masonry 是 firefox 在 firefox 87 開始支持的一種基于 grid 布局快速創(chuàng)建瀑布流布局的方式。并且 firefox 一直在推動該屬性進入標準當中。

從 firefox 87 開始，在瀏覽器輸入網(wǎng)址欄輸入 about:config 并且開啟 layout.css.grid-template-masonry-value.enabled 配置使用。Can i use -- grid-template-rows: masonry[5]

正常而言，我們想要實現(xiàn)瀑布流布局還是需要花費一定的功夫的，即便是基于 grid 布局。在之前，我們通過 grid 布局，通過精細化控制每一個 grid item，也可以實現(xiàn)一些偽瀑布流布局：

  1. <div class="g-container"> 
  2.   <div class="g-item">1</div> 
  3.   <div class="g-item">2</div> 
  4.   <div class="g-item">3</div> 
  5.   <div class="g-item">4</div> 
  6.   <div class="g-item">5</div> 
  7.   <div class="g-item">6</div> 
  8.   <div class="g-item">7</div> 
  9.   <div class="g-item">8</div> 
  10. </div> 
  1. .g-container { 
  2.     height: 100vh; 
  3.     display: grid; 
  4.     grid-template-columns: repeat(4, 1fr); 
  5.     grid-template-rows: repeat(8, 1fr); 
  6. } 
  7.  
  8. .g-item { 
  9.     &:nth-child(1) { 
  10.         grid-column: 1; 
  11.         grid-row: 1 / 3; 
  12.     } 
  13.     &:nth-child(2) { 
  14.         grid-column: 2; 
  15.         grid-row: 1 / 4; 
  16.     } 
  17.     &:nth-child(3) { 
  18.         grid-column: 3; 
  19.         grid-row: 1 / 5; 
  20.     } 
  21.     &:nth-child(4) { 
  22.         grid-column: 4; 
  23.         grid-row: 1 / 6; 
  24.     } 
  25.     &:nth-child(5) { 
  26.         grid-column: 1; 
  27.         grid-row: 3 / 9; 
  28.     } 
  29.     &:nth-child(6) { 
  30.         grid-column: 2; 
  31.         grid-row: 4 / 9; 
  32.     } 
  33.     &:nth-child(7) { 
  34.         grid-column: 3; 
  35.         grid-row: 5 / 9; 
  36.     } 
  37.     &:nth-child(8) { 
  38.         grid-column: 4; 
  39.         grid-row: 6 / 9; 
  40.     } 
  41. } 

效果如下：

CSS Grid 實現(xiàn)偽瀑布流布局

CodePen Demo -- CSS Grid 實現(xiàn)偽瀑布流布局[6]

在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每個 grid item 的所占格子的大小，但是這樣做的成本太高了，元素一多，計算量也非常大，并且還是在我們提前知道每個元素的高寬的前提下。

而在有了 grid-template-rows: masonry 之后，一切都會變得簡單許多，對于一個不確定每個元素高度的 4 列的 grid 布局：

  1. .container { 
  2.   display: grid; 
  3.   grid-template-columns: repeat(4, 1fr); 
  4. } 

正常而言，看到的會是這樣：

簡單的給容器加上 grid-template-rows: masonry，表示豎方向上，采用瀑布流布局：

  1. .container { 
  2.   display: grid; 
  3.   grid-template-columns: repeat(4, 1fr); 
  4. + grid-template-rows: masonry; 
  5. } 

便可以輕松的得到這樣一種瀑布流布局：

如果你在使用 firefox，并且開啟了 layout.css.grid-template-masonry-value.enabled 配置，可以戳進下面的 DEMO 感受一下：

CodePen Demo -- grid-template-rows: masonry 實現(xiàn)瀑布流布局[7]

當然，這是一個最簡單的 DEMO，關(guān)于更多 grid-template-rows: masonry 相關(guān)知識，你可以詳細的看看這篇文章：Native CSS Masonry Layout In CSS Grid[8]

CSS 容器查詢(Container Queries)

什么是 CSS 容器查詢[9](Container Queries)?

在之前，對于同個樣式，我們?nèi)绻Ｍ鶕?jù)視口大小得到不一樣效果，通常使用的是媒體查詢。

但是，一些容器或者組件的設計可能并不總是與視口的大小有關(guān)，而是與組件在布局中的放置位置有關(guān)。

所以在未來，新增了一種方式可以對不同狀態(tài)下的容器樣式進行控制，也就是容器查詢。在最新的 Chrome Canary[10] 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。

假設我們有如下結(jié)構(gòu)：

  1. <div class="wrap"> 
  2.     <div class="g-container"> 
  3.         <div class="child">Title</div> 
  4.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p> 
  5.     </div> 
  6. </div> 

正常情況下的樣式如下：

  1. .g-container { 
  2.     display: flex; 
  3.     flex-wrap: nowrap; 
  4.     border: 2px solid #ddd; 
  5.  
  6.     .child { 
  7.         flex-shrink: 0; 
  8.         width: 200px; 
  9.         height: 100px; 
  10.         background: deeppink; 
  11.     } 
  12.      
  13.     p { 
  14.         height: 100px; 
  15.         font-size: 16px; 
  16.     } 
  17. } 

結(jié)構(gòu)如下：

在未來，我們可以通過 @container query 語法，設定父容器 .wrap 在不同寬度下的不同表現(xiàn)，在上述代碼基礎(chǔ)上，新增下述代碼：

  1. .wrap { 
  2.     contain: layout inline-size; 
  3.     resize: horizontal; 
  4.     overflow: auto; 
  5. } 
  6. .g-container { 
  7.     display: flex; 
  8.     flex-wrap: nowrap; 
  9.     border: 2px solid #ddd; 
  10.     .child { 
  11.         flex-shrink: 0; 
  12.         width: 200px; 
  13.         height: 100px; 
  14.         background: deeppink; 
  15.     } 
  16.     p { 
  17.         height: 100px; 
  18.         font-size: 16px; 
  19.     } 
  20. } 
  21. // 當 .wrap 寬度小于等于 400px 時下述代碼生效  
  22. @container (max-width: 400px) { 
  23.     .g-container { 
  24.         flex-wrap: wrap; 
  25.         flex-direction: column; 
  26.     } 
  27.     .g-container .child { 
  28.         width: 100%; 
  29.     } 
  30. } 

注意這里要開啟 @container query，需要配合容器的 contain 屬性，這里設置了 contain: layout inline-size，當 .wrap 寬度小于等于 400px 時，@container (max-width: 400px) 內(nèi)的代碼則生效，從橫向布局 flex-wrap: nowrap 變換成了縱向換行布局 flex-wrap: wrap：

 å›¾ç‰‡

如果你的瀏覽器已經(jīng)開啟了 chrome://flags/#enable-container-queries，你可以戳這個代碼感受一下：

CodePen Demo -- CSS @container query Demo[11]

媒體查詢與容器查詢的異同，通過一張簡單的圖看看，核心的點在于容器的寬度發(fā)生變化時，視口的寬度不一定會發(fā)生變化：

這里僅僅是介紹了 @container query 的冰山一角，更多內(nèi)容你可以戳這里了解更多：say-hello-to-css-container-queries[12]

最后

好了，本文到此結(jié)束，希望對你有幫助 :)

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[13] .

參考資料

  • [1]Chrome Canary: https://www.google.com/chrome/canary/
  • [2]Can i use -- gap property for Flexbox: https://caniuse.com/?search=flex%20gap
  • [3]Can i use -- aspect-ratio: https://caniuse.com/?search=aspect-ratio
  • [4]CodePen Demo -- aspect-ratio Demo: https://codepen.io/Chokcoco/pen/eYgjbqG
  • [5]Can i use -- grid-template-rows: masonry: https://caniuse.com/?search=grid-template-rows
  • [6]CodePen Demo -- CSS Grid 實現(xiàn)偽瀑布流布局: https://codepen.io/Chokcoco/pen/KGXqyo
  • [7]CodePen Demo -- grid-template-rows: masonry 實現(xiàn)瀑布流布局: https://codepen.io/Chokcoco/pen/NWdBojd
  • [8]Native CSS Masonry Layout In CSS Grid: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
  • [9]CSS 容器查詢: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
  • [10]Chrome Canary: https://www.google.com/chrome/canary/
  • [11]CodePen Demo -- CSS @container query Demo: https://codepen.io/Chokcoco/pen/PoWBOQR
  • [12]say-hello-to-css-container-queries: https://ishadeed.com/article/say-hello-to-css-container-queries/
  • [13]Github -- iCSS: https://github.com/chokcoco/iCSS

 

責任編輯：姜華 來源： iCSS前端趣聞
CSS Container Queries Chrome
相關(guān)推薦

2020-01-20 14:28:05

程序員技能開發(fā)者

2021-11-17 10:45:58

Chrome 95新特性前端

2020-12-12 13:50:16

云開發(fā)

2021-01-27 13:54:05

開發(fā)云原生工具

2018-06-24 16:39:28

Tomcat異常線程

2021-03-25 06:12:55

SVG 濾鏡CSS

2022-08-26 05:26:33

容器查詢CSS

2018-09-11 16:15:36

Vue高版本前端

2022-06-15 07:21:47

鼠標指針交互效果CSS

2022-08-15 22:34:47

Overflow方向裁切

2022-12-28 07:48:40

六邊形動畫CSS

2022-07-11 13:09:26

mmapLinux

2017-08-01 00:52:07

kafka大數(shù)據(jù)消息總線

2023-05-15 09:16:18

CSSCSS Mask

2012-06-19 16:49:19

Web開發(fā)

2013-08-28 09:46:09

Debian LinuLinux發(fā)行版

2010-04-09 11:24:59

Oracle 排序

2015-10-28 13:57:29

融合架構(gòu)華三UIS

2012-05-22 10:12:59

jQuery

2015-09-17 17:49:13

華三／UIS
點贊
收藏

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