注意这里要开启 @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
媒体查询与容器查询的异同，通过一张简单的图看看，核心的点在于容器的宽度发生变化时，视口的宽度不一定会发生变化：