在最新的ChromeCanary中，支持一种名为ContainerQueries的有趣CSS语法。ChromeCanary：每日为开发人员构建最前沿的网络技术。当然也可能不稳定~不过在最近的Chrome版本中，陆续支持了一些有趣的属性。本文将介绍一些有趣的新特性，我们可以在今天的新时代布局中逐步使用，通过本文，您将能够了解：flex布局中的gap属性控制容器宽高比属性aspect-ratiofirefoxCSSGrid瀑布流layout(grid-template-rows:masonry)CSS容器查询（ContainerQueries）flexlayoutgap中的gap属性并不是新属性。它一直存在于多列布局和网格布局中。其中：column-gap属性用于设置多列布局网格中元素列之间的间距大小布局中的gap属性用于设置网格行与列之间的间距。该属性是row-gap和column-gap的简写，最初称为grid-gap。例如，我们有以下网格布局：
Loremipsumdolorsitametconsecteturadipisicingelit。Necessitatibusveleligendi,esseillumsimiliquesint!!
正常样式如下：.g-container{display:flex;弹性包装：nowrap；边框：2px实心#ddd；.child{flex-shrink:0;宽度：200px；高度：100px；背景：深粉色；}p{高度：100px；字体大小：16px；}}结构如下：以后可以使用@container查询语法，设置父容器.wrap在不同宽度下的不同表现，在上述代码的基础上添加如下代码：.wrap{contain:布局内联大小；调整大小：水平；溢出：自动；}.g-容器{显示：弹性；弹性包装：nowrap；边框：2px实心#ddd；.child{flex-shrink:0;宽度：200px；高度：100px；背景：深粉色；;}}//下面代码在.wrap宽度小于等于400px时生效@container(max-width:400px){.g-container{flex-wrap:wrap;弹性方向：列；}.g-container.child{宽度：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媒体查询和容器查询的异同，看个简单的图片，核心点是当容器的宽度发生变化时，视口的宽度不一定发生变化：这只是@container查询的冰山一角。更多内容可以点击这里了解更多：say-hello-to-css-container-queries最后，本文到此结束，希望对你有所帮助:)想要的不要错过我的iCSS获取最有趣的CSS资讯，有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。