容器查询需显式设置container-type和可计算尺寸才生效，否则被忽略；flex容器须手动添加container-type，查询仅响应自身尺寸变化而非子项伸缩。
容器查询怎么写才不会被忽略
容器查询（@container）必须配合显式容器尺寸和 container-type 才生效，否则浏览器直接跳过整个规则块。
- 常见错误：给
div直接加@container，但没设container-type: inline-size或container-type: size - 必须有明确的尺寸限制：父容器需有
width、max-width、inline-size等可计算尺寸，min-content或fit-content不行 -
container-name是可选的，但命名后必须用@container name (min-width: 400px)引用；不命名就只能用@container (min-width: 400px)匹配默认容器 - Flex 容器本身不自动成为查询容器——哪怕它有
display: flex，也得手动加container-type
Flex 布局里哪些元素能当容器查询目标
只有设置了 container-type 的元素才是查询上下文，Flex 项目（flex-item）默认不是，也不能靠 flex 属性“继承”查询能力。
- 典型误用：在
.item { display: flex; }上加container-type，以为子元素能响应它的尺寸变化——不行，查询只作用于该元素自身内容区，不辐射子树布局逻辑 - 真正有效的组合：把
container-type: inline-size加在 Flex 容器（.list { display: flex; container-type: inline-size; }），然后对它的直接子项（.item）写@container (min-width: 300px)样式 - 注意兼容性：
container-type: size需要同时设置container-name，且目前仅 Chromium 111+ 和 safari 17.4+ 支持，inline-size覆盖更广
Flex 子项尺寸变化时，容器查询会重触发吗
不会自动重触发——容器查询只响应容器自身的尺寸变化（比如父容器缩放、窗口 resize、width 动画），不响应 Flex 子项伸缩导致的内容区微调。
- 例如：Flex 容器设了
flex-wrap: wrap，子项换行后容器高度变大，但若没显式改height或block-size，container-type: inline-size不会感知这个变化 - 如果依赖子项数量或排列触发样式切换，更适合用
:has()+ Flex 伪类（如.container:has(> .item:nth-child(3))），而不是硬套容器查询 - 动画中动态改容器
width可以触发布局重计算和查询匹配，但transform: scale()不行——它不改变盒模型尺寸
chrome DevTools 里怎么验证容器查询是否生效
打开 Elements 面板，选中疑似容器的元素，在 Styles 标签页底部找 “Container queries” 折叠区，点开才能看到当前匹配的 @container 规则。
立即学习“前端免费学习笔记（深入）”；
- 没看到该区域？说明该元素没被识别为容器——检查是否漏了
container-type，或用了不支持的值（如container-type: normal） - 看到区域但规则灰掉：代表当前容器尺寸不满足查询条件，鼠标悬停提示实际尺寸（如 “inline-size: 280px”），对比你的
(min-width: 300px)就知道为啥不生效 - 调试时临时加
outline: 1px solid red到容器上，能快速确认你选中的确实是那个带container-type的元素，而非它的某个子节点
容器查询不是 Flex 的延伸功能，它和弹性布局是正交机制；两者混用时，谁控制尺寸、谁响应变化，边界必须划清——不然查半天发现样式根本没进渲染流水线。