版式图鉴LAYOUT ATLAS ⌕ 搜索
容器查询布局 海报
№ 242

容器查询布局

定义 Definition

容器查询让组件根据所在容器的尺寸与状态调整布局与样式，实现真正的组件自治，让布局更智能灵活。

要目 Key Points
以容器为准突破视口限制，只对容器变化响应。
组件自治相同组件在不同容器宽度下自动重排，独立决策与适配。
局部响应小容器紧凑布局，中容器平衡布局，大容器展开布局。
用法 Application

在有限的组件内实现更好的信息层级与可读性，布局更智能、体验更灵活。

关键词 Keywords
容器查询组件自治局部响应以容器为准
参见 Related
222 普通流布局223 块级布局224 行内布局
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题CSS 流、定位与响应
本主题共21 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 241 自适应布局 243 堆栈 →

实况演示

Live Demo · 真实 HTML/CSS
拖拽右下角调整宽度 · 独立页打开 ↗ 查看源码 ↗
关键 CSS fold / unfold 
/* ═══ 本 demo 自定义样式 ═══ */

.wrap-cq { display: flex; gap: 14px; align-items: flex-start; }
  .zone { container-type: inline-size; border: 1px dashed var(--accent); padding: 8px; flex: 1.6; }
  .zone.narrow { flex: 1; }
  .zone .zl { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: .1em; margin-bottom: 8px; }
  .cq-card { display: grid; gap: 10px; border: 1px solid var(--line); background: var(--paper-2); padding: 10px; }
  .cq-card .cv { aspect-ratio: 16/9; background: color-mix(in srgb, var(--accent) 12%, var(--paper-2)); }
  .cq-card .t { font-weight: 650; font-size: 13px; }
  .cq-card .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
  @container (min-width: 380px) {
    .cq-card { grid-template-columns: 132px 1fr; align-items: center; }
    .cq-card .cv { aspect-ratio: 16/10; height: 100%; }
  }

/* ═══ 共享令牌类 · demo 外壳已内置 ═══ */

.blk {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-2);
  padding: 10px; min-height: 34px;
}
.blk.acc {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.blk.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid var(--line); color: var(--ink-2); padding: 2px 8px;
  border-radius: 2px; background: var(--paper-2);
}
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.card .cv { aspect-ratio: 16/10; background: color-mix(in srgb, var(--accent) 10%, var(--paper-2)); border-bottom: 1px solid var(--line); }
.card .bd { padding: 9px 10px; }
.card .bd .t { font-weight: 600; font-size: 12.5px; }
.card .bd .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); border: 1px solid var(--line);
}
.fake-text { height: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1px; }
.fake-text.w60 { width: 60%; } .fake-text.w80 { width: 80%; } .fake-text.w40 { width: 40%; }
.fake-text + .fake-text { margin-top: 6px; }

同主题

查看全部 →