在最新的 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> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>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></div> <div></div> div { background: deeppink; aspect-ratio: 1/1; } .width { width: 100px; } .height { height: 100px; }都可以得到如下图形：
其次，设定了 aspect-ratio 的元素，元素的高宽其中一个发生变化，另外一个会跟随变化：
<div> <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