版式图鉴LAYOUT ATLAS ⌕ 搜索
堆叠重排 海报
№ 296

堆叠重排

定义 Definition

内容模块纵向堆叠，顺序清晰，结构自适应。

要目 Key Points
纵向堆叠从上到下有序排列。
保持层级标题优先，信息跟随。
减少横向依赖压缩宽度，信息不丢失。
模块间距节奏一致，呼吸舒适。
用法 Application

实践时先确定信息优先级，模块化拆分内容，垂直堆叠重排，再检查节奏与间距。

关键词 Keywords
堆叠重排纵向堆叠响应式模块间距阅读动线
参见 Related
291 大体流动模式292 列下落模式293 布局切换模式
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题响应式重排模式
本主题共10 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 295 画布外模式 297 顺序重排 →

实况演示

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

.sr2 { display: flex; gap: 10px; align-items: stretch; }
  .sr2 .blk { min-height: 150px; flex: 1; display: grid; align-content: start; gap: 8px; padding: 10px; }
  @media (max-width: 500px) {
    .sr2 { flex-direction: column; }
    .sr2 .blk { min-height: 64px; flex-direction: row; display: flex; align-items: center; gap: 10px; }
    .sr2 .lead { order: -1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
  }

/* ═══ 共享令牌类 · 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; }

同主题

查看全部 →
[Demo]
291 大体流动模式
291 大体流动模式
[Demo]
293 布局切换模式
293 布局切换模式