在最新的ChromeCanary中，支持一种名为ContainerQueries的有趣CSS语法。ChromeCanary[1]：每日为开发人员构建，处于网络技术的最前沿。当然也可能不稳定~不过在最近的Chrome版本中，陆续支持了一些有趣的属性。本文将介绍一些我们可以在当今新时代布局中逐步使用的有趣的新特性，通过本文，您将能够了解：flex布局中的gap属性控制容器CSSGrid瀑布流的aspect-ratio属性firefox下的布局(grid-template-rows:masonry)CSS容器查询(ContainerQueries)flex布局gap中的gap属性并不是一个新属性，它一直存在于多列布局和网格布局中，其中：column-gap属性用于设置多列布局中元素列之间的间距大小multi-column网格布局中的gap属性用于设置网格行列之间的间距。这个属性是row-gap和column-gap的缩写，最初叫grid-gap。例如，我们有以下网格布局：
Loremipsumdolorsitametconsecteturadipisicingelit.Necessitatibusveleligendi,esseillumsimiliquesint!
正常样式如下：.g-container{display:flex;flex-wrap:nowrap;border:2pxsolid#ddd;.child{flex-shrink:0;width:200px;height:100px;background:deeppink;}p{height:100px;font-size:16px;}}结构如下：以后我们可以使用@container查询语法来设置父container.wrap的不同表现不同的宽度。在代码的基础上，添加如下代码：.wrap{contain:layoutinline-size;resize:horizo??ntal;overflow:auto;}.g-container{display:flex;flex-wrap:nowrap;border:2pxsolid#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这里需要开启查询容器的contain属性，这里设置contain:layoutinline-size，当.wrap的宽度小于等于400px时，@container(max-width:400px)里面的代码会生效，从水平布局flex-wrap:nowrap变为垂直环绕布局flex-wrap:wrap:如果你的浏览器打开了chrome://flags/#enable-container-queries，可以戳这段代码体验一下：CodePenDemo--CSS@containerqueryDemo[11]媒体查询的异同而容器的查询，通过一张简单的图来看一下。核心点在于当容器的宽度发生变化时，视口的宽度不一定发生变化：这里只是@container查询的冰山一角。想要了解更多，可以点击这里了解更多：say-hello-to-css-container-queries[12]最后，本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章总结在我的Github——iCSS[13]。参考文献[1]ChromeCanary:https://www.google.com/chrome/canary/[2]Caniuse--gappropertyforFlexbox:https://caniuse.com/?search=flex%20gap[3]我可以使用--aspect-ratio:https://caniuse.com/?search=aspect-ratio[4]CodePenDemo--aspect-ratioDemo:https://codepen.io/Chokcoco/pen/eYgjbqG[5]Caniuse--grid-template-rows:masonry:https://caniuse.com/?search=grid-template-rows[6]CodePenDemo--CSSGrid实现伪瀑布流布局:https://codepen.io/Chokcoco/pen/KGXqyo[7]CodePen演示--grid-template-rows:masonry实现瀑布布局：https://codepen.io/Chokcoco/pen/NWdBojd[8]CSS网格中的原生CSS砌体布局：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]ChromeCanary：https://www.google.com/chrome/canary/[11]CodePenDemo--CSS@containerqueryDemo: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