CSS Container Query

Container Query 一个顾名思义的技术，容器查询，如果说之前的 Media Query 赋予了大方向上的调整，那么 Container Query 就是精细方向的调整，话不多说，请点击下方链接查看效果。
View video

What

大体效果如下面三张图，卡片最初是左右布局，当卡片宽度小于一定值时，变成了上下布局，而当屏幕变成小屏幕，每列只显示一个是，因为卡片宽度足够，又自动变成了左右布局。

Screen Shot 2022-04-07 at 15.35.56.png

Screen Shot 2022-04-07 at 15.36.19.png

Screen Shot 2022-04-07 at 15.36.25.png

目前处于实验阶段，且需要在 Chrome Canary 上开启该特性(其实按照说明，目前 Chrome 最新版(v100)也可以通过 flag 开启，但不知为何开启后不生效)。

container-type: inline-size;
container-name: card;

container-type 还有一个属性是 size，但是没弄明白怎么用的，它像是把 container 下的内容变成了 absolute 节点。

@container card (max-width: 200px) {
  /* xxxxx */
}

有了这个特性之后，在做组件方面更加方便了，不会再根据屏幕大小去猜测组件可用的空间，而是通过自己的大小准确的调整内部布局。