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

Chrome Canary[1]：开发者专用的每日构建版，站上网络科技最前沿。当然，不一定稳定~

而在最近几个 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 布局：

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. } 

效果如下：