在最新的 Chrome Canary 中，一個有意思的 CSS 語法 Container Queries 得到了支援。
Chrome Canary：開發者專用的每日構建版，站上網路科技最前沿。當然，不一定穩定~
而在最近幾個 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屬性是用來設定網格行與列之間的間隙，該屬性是row-gap和column-gap的簡寫形式，並且起初是叫grid-gap
譬如我們有如下一個 grid 佈局：
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.grid-container {
display: grid;
border: 5px solid;
padding: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
width: 100px;
height: 100px;
background: deeppink;
border: 2px solid #333;
}
效果如下：
通過給 grid-container 新增 gap 屬性，可以非常方便的設定網格行與列之間的間隙：
.grid-container {
display: grid;
border: 5px solid;
padding: 20px;
grid-template-columns: 1fr 1fr 1fr;
+ gap: 5px;
}
而從 Chromium 84 開始，我們可以開始在 flex 佈局中使用 gap 屬性了！Can i use -- gap property for Flexbox
它的作用與在 grid 佈局中的類似，可以控制水平和豎直方向上 flex item 之間的間距：
.flex-container {
width: 500px;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
border: 2px solid #333;
}
.item {
width: 80px;
height: 100px;
background: deeppink;
}
gap 屬性的優勢在於，它避免了傳統的使用 margin 的時候需要考慮第一個或者最後一個元素的左邊距或者右邊距的煩惱。正常而言，4 個水平的 flex item，它們就應該只有 3 個間隙。gap 只生效於兩個 flex item 之間。
控制容器寬高比屬性 aspect-ratio
保持元素容器一致的寬高比（稱為長寬比）對於響應式 Web 設計和在某些佈局當中至關重要。 現在，通過 Chromium 88 和 Firefox 87，我們有了一種更直接的方法來控制元素的寬高比 -- aspect-ratio。Can i use -- aspect-ratio
首先，我們只需要設定元素的寬，或者元素的高，再通過 aspect-ratio 屬性，即可以控制元素的整體寬高：
<div class="width"></div>
<div class="height"></div>
div {
background: deeppink;
aspect-ratio: 1/1;
}
.width {
width: 100px;
}
.height {
height: 100px;
}
都可以得到如下圖形：
其次，設定了 aspect-ratio 的元素，元素的高寬其中一個發生變化，另外一個會跟隨變化：
<div class="container">
<div>寬高比1:1</div>
<div>寬高比2:1</div>
<div>寬高比3:1</div>
</div>
.container {
display: flex;
width: 30vw;
padding: 20px;
gap: 20px;
}
.container > div {
flex-grow: 1;
background: deeppink;
}
.container > div:nth-child(1) {
aspect-ratio: 1/1;
}
.container > div:nth-child(2) {
aspect-ratio: 2/1;
}
.container > div:nth-child(3) {
aspect-ratio: 3/1;
}
當容器大小變化，每個子元素的寬度變寬，元素的高度也隨著設定的 aspect-ratio 比例跟隨變化：
CodePen Demo -- aspect-ratio Demo
firefox 下的 CSS Grid 瀑布流佈局（grid-template-rows: masonry）
grid-template-rows: masonry 是 firefox 在 firefox 87 開始支援的一種基於 grid 佈局快速建立瀑布流佈局的方式。並且 firefox 一直在推動該屬性進入標準當中。
從 firefox 87 開始，在瀏覽器輸入網址欄輸入 about:config 並且開啟 layout.css.grid-template-masonry-value.enabled 配置使用。Can i use -- grid-template-rows: masonry
正常而言，我們想要實現瀑布流佈局還是需要花費一定的功夫的，即便是基於 grid 佈局。在之前，我們通過 grid 佈局，通過精細化控制每一個 grid item，也可以實現一些偽瀑布流佈局：
<div class="g-container">
<div class="g-item">1</div>
<div class="g-item">2</div>
<div class="g-item">3</div>
<div class="g-item">4</div>
<div class="g-item">5</div>
<div class="g-item">6</div>
<div class="g-item">7</div>
<div class="g-item">8</div>
</div>
.g-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.g-item {
&:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
&:nth-child(2) {
grid-column: 2;
grid-row: 1 / 4;
}
&:nth-child(3) {
grid-column: 3;
grid-row: 1 / 5;
}
&:nth-child(4) {
grid-column: 4;
grid-row: 1 / 6;
}
&:nth-child(5) {
grid-column: 1;
grid-row: 3 / 9;
}
&:nth-child(6) {
grid-column: 2;
grid-row: 4 / 9;
}
&:nth-child(7) {
grid-column: 3;
grid-row: 5 / 9;
}
&:nth-child(8) {
grid-column: 4;
grid-row: 6 / 9;
}
}
效果如下：
CodePen Demo -- CSS Grid 實現偽瀑布流佈局
在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每個 grid item 的所佔格子的大小，但是這樣做的成本太高了，元素一多，計算量也非常大，並且還是在我們提前知道每個元素的高寬的前提下。
而在有了 grid-template-rows: masonry 之後，一切都會變得簡單許多，對於一個不確定每個元素高度的 4 列的 grid 佈局：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
正常而言，看到的會是這樣：
簡單的給容器加上 grid-template-rows: masonry，表示豎方向上，採用瀑布流佈局：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: masonry;
}
便可以輕鬆的得到這樣一種瀑布流佈局：
如果你在使用 firefox，並且開啟了 layout.css.grid-template-masonry-value.enabled 配置，可以戳進下面的 DEMO 感受一下：
CodePen Demo -- grid-template-rows: masonry 實現瀑布流佈局
當然，這是一個最簡單的 DEMO，關於更多 grid-template-rows: masonry 相關知識，你可以詳細的看看這篇文章：Native CSS Masonry Layout In CSS Grid
CSS 容器查詢（Container Queries）
什麼是 CSS 容器查詢（Container Queries）？
在之前，對於同個樣式，我們如果希望根據視口大小得到不一樣效果，通常使用的是媒體查詢。
但是，一些容器或者元件的設計可能並不總是與視口的大小有關，而是與元件在佈局中的放置位置有關。
所以在未來，新增了一種方式可以對不同狀態下的容器樣式進行控制，也就是容器查詢。在最新的 Chrome Canary 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。
假設我們有如下結構：
<div class="wrap">
<div class="g-container">
<div class="child">Title</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
</div>
</div>
正常情況下的樣式如下：
.g-container {
display: flex;
flex-wrap: nowrap;
border: 2px solid #ddd;
.child {
flex-shrink: 0;
width: 200px;
height: 100px;
background: deeppink;
}
p {
height: 100px;
font-size: 16px;
}
}
結構如下：
在未來，我們可以通過 @container query 語法，設定父容器 .wrap 在不同寬度下的不同表現，在上述程式碼基礎上，新增下述程式碼：
.wrap {
contain: layout inline-size;
resize: horizontal;
overflow: auto;
}
.g-container {
display: flex;
flex-wrap: nowrap;
border: 2px solid #ddd;
.child {
flex-shrink: 0;
width: 200px;
height: 100px;
background: deeppink;
}
p {
height: 100px;
font-size: 16px;
}
}
// 當 .wrap 寬度小於等於 400px 時下述程式碼生效
@container (max-width: 400px) {
.g-container {
flex-wrap: wrap;
flex-direction: column;
}
.g-container .child {
width: 100%;
}
}
注意這裡要開啟 @container query，需要配合容器的 contain 屬性，這裡設定了 contain: layout inline-size，當 .wrap 寬度小於等於 400px 時，@container (max-width: 400px) 內的程式碼則生效，從橫向佈局 flex-wrap: nowrap 變換成了縱向換行佈局 flex-wrap: wrap：
如果你的瀏覽器已經開啟了 chrome://flags/#enable-container-queries，你可以戳這個程式碼感受一下：
CodePen Demo -- CSS @container query Demo
媒體查詢與容器查詢的異同，通過一張簡單的圖看看，核心的點在於容器的寬度發生變化時，視口的寬度不一定會發生變化：
這裡僅僅是介紹了 @container query 的冰山一角，更多內容你可以戳這裡瞭解更多：say-hello-to-css-container-queries
最後
好了，本文到此結束，希望對你有幫助 ?
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。