1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* column-count 的基本用法 */

/* 设置为3列 */
.three-columns {
  column-count: 3;
  /* 文章内容会自动分成3列 */
}

/* 设置为2列 */
.two-columns {
  column-count: 2;
}

/* 设置为1列（等于不分割）*/
.one-column {
  column-count: 1;
}

/* 设置为4列 */
.four-columns {
  column-count: 4;
}

1
2
3
4
5
6
7

<article class="three-columns">
  <p>这是第一段文字，会从上到下填满第一列...</p>
  <p>这是第二段文字，继续填充第一列，直到第一列填满...</p>
  <p>这是第三段文字，如果第一列满了，会自动流到第二列...</p>
  <p>这是第四段文字，会在第二列继续填充...</p>
  <p>这是第五段文字，最后会流到第三列。</p>
</article>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* 1. 文章正文分栏 */
.article-text {
  column-count: 2;  /* 双栏排版 */
  column-gap: 40px;  /* 列间距40px */
  text-align: justify;  /* 两端对齐 */
  font-size: 16px;
  line-height: 1.8;
}

/* 2. 新闻列表 */
.news-grid {
  column-count: 3;
  column-gap: 20px;
}

.news-item {
  break-inside: avoid;  /* 防止新闻标题被截断 */
  margin-bottom: 20px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 3. 瀑布流卡片布局 */
.masonry-grid {
  column-count: 4;
  column-gap: 16px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  display: block;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* column-width 的基本用法 */

/* 每列至少200px宽 */
.auto-columns {
  column-width: 200px;
  /* 浏览器会自动计算列数，但公式不是简单的"容器宽度 / 200px" */
}

/* 每列至少300px宽 */
.wide-columns {
  column-width: 300px;
}

1
2
3
4
5

<div class="auto-columns">
  <p>这段文字会自动根据容器宽度分配到多列中。</p>
  <p>容器越宽，列数越多；容器越窄，列数越少。</p>
  <p>这是响应式的多列布局。</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* column-count —— 固定列数 */

/* 一定是3列，不管容器有多宽 */
.fixed-columns {
  column-count: 3;
  /* 容器很宽时，每列会非常宽 */
  /* 容器很窄时，每列会非常窄 */
}

/* column-width —— 最小列宽 */

/* 每列至少250px，列数由容器决定 */
.fluid-columns {
  column-width: 250px;
  /* 假设 column-gap 默认 1em（16px），每列至少 250px：
     容器 900px  → floor((900+16)/266) = 3 列，每列 ≈ 289px
     容器 1200px → floor((1200+16)/266) = 4 列，每列 288px
     容器 400px  → 只能 1 列，宽度被撑满到 400px */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 同时设置 column-width 和 column-count */

/* 每列至少200px，但最多4列 */
.combined-columns {
  column-width: 200px;  /* 每列最小200px */
  column-count: 4;       /* 最多4列 */
  /* 效果：列数在 1-4 之间，每列至少 200px（实际宽度会被拉开以填满容器）*/
}

/* 响应式多列布局的推荐写法 */
.responsive-columns {
  column-width: 250px;   /* 每列最小250px */
  column-count: 3;       /* 但最多3列 */
  column-gap: 30px;      /* 列间距30px */
}

/* 两个值同时存在时，规范里的公式变成：
     N = min(column-count, max(1, floor((U + gap) / (column-width + gap))))
   代入 column-width: 250px、column-gap: 30px、column-count: 3：
     N = min(3, floor((U + 30) / 280))

   实际效果：
     容器宽度 < 530px       → 1 列（连两列都排不下）
     容器宽度 530px ~ 809px → 2 列
     容器宽度 ≥ 810px       → 3 列（到顶了，再加宽也只是把每列拉宽）
   校验一下临界值：U = 810 时，(810+30)/280 = 3，正好凑够 3 列，
   此时每列宽度 = (810+30)/3 - 30 = 250px，刚好等于 column-width。 */

1
2
3
4
5

<div class="responsive-columns">
  <p>这段文字会使用响应式多列布局。</p>
  <p>容器宽时列数多，窄时列数少。</p>
  <p>但列数不会超过3列，宽度不会小于250px。</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 多列布局的完整设置 */

.multi-column-layout {
  /* 列数控制 */
  column-count: 3;       /* 固定列数 */
  column-width: 250px;   /* 最小列宽 */

  /* 列间距 */
  column-gap: 40px;     /* 列与列之间的间距 */

  /* 列边框（分隔线）*/
  column-rule: 1px solid #ddd;  /* 列之间的分隔线 */
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: #ddd;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/* columns 缩写 */

/* 等价于 column-count: 3; column-width: 200px; */
.shorthand-1 {
  columns: 3 200px;
}

/* 顺序反过来也一样 */
.shorthand-2 {
  columns: 200px 3;
}

/* 只写列数：等价于 column-count: 3; column-width: auto; */
.count-only {
  columns: 3;
}

/* 只写列宽：等价于 column-width: 200px; column-count: auto; */
.width-only {
  columns: 200px;
}

/* ⚠️ 同样是"2"，带单位含义就完全不同 */
.plain-two {
  columns: 2;    /* 2 列 */
}

.not-columns {
  columns: 2ch;  /* 这不是"2列"，而是 column-width: 2ch */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* column-gap 的基本用法 */

/* 默认间距 */
.normal-gap {
  column-gap: normal;  /* 初始值就是 normal，多列布局里 normal 计算成 1em */
}

/* 自定义间距 */
.wide-gap {
  column-gap: 40px;  /* 40px 间距 */
}

.narrow-gap {
  column-gap: 10px;  /* 10px 间距 */
}

/* 使用 column-count 和 column-gap */
.gapped-columns {
  column-count: 3;
  column-gap: 30px;  /* 三列之间各30px间距 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* column-rule 的基本用法 */

/* 完整写法 */
.rule-columns {
  column-count: 3;
  column-rule: 1px solid #ccc;  /* 分隔线样式 */
  /* 等同于：*/
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: #ccc;
}

/* 不同风格的列分隔线 */
.dashed-rule {
  column-count: 3;
  column-rule: 2px dashed #3498db;  /* 虚线分隔 */
}

.dotted-rule {
  column-count: 3;
  column-rule: 2px dotted #e74c3c;  /* 点线分隔 */
}

.double-rule {
  column-count: 3;
  column-rule: 3px double #2ecc71;  /* 双线分隔 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* 1. 报纸风格的栏目 */
.newspaper-columns {
  column-count: 3;
  column-gap: 30px;           /* 列间距30px */
  column-rule: 1px solid #ccc;  /* 列分隔线 */
  text-align: justify;           /* 两端对齐 */
  font-size: 15px;
  line-height: 1.7;
}

.newspaper-columns h2 {
  column-span: all;  /* 标题横跨所有列 */
  text-align: center;
  margin-bottom: 20px;
}

/* 2. 画廊展示 */
.gallery-columns {
  column-count: 4;
  column-gap: 20px;
  column-rule: 1px solid #eee;
}

.gallery-columns figure {
  break-inside: avoid;
  margin-bottom: 15px;
}

.gallery-columns img {
  width: 100%;
  border-radius: 4px;
}

/* 3. 目录导航 */
.toc-columns {
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px dashed #ddd;
}

.toc-columns li {
  margin-bottom: 8px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* column-fill 的三个值 */

/* balance：内容在所有列之间平均分配（初始值）*/
.balanced {
  column-count: 3;
  column-fill: balance;
  /* 效果：三列高度基本一致，最后一列不会特别空 */
}

/* auto：按顺序把前面几列填满，填满一列再填下一列
   —— 只有在容器高度被固定（或处于分页环境）时才看得到差别 */
.sequential {
  column-count: 3;
  height: 300px;      /* 必须给出确定高度，否则内容会把容器撑高，各列又变成"等高" */
  column-fill: auto;
  /* 效果：第一列填满 300px，才轮到第二列 */
}

/* balance-all：分页环境里连"最后一段碎片"也要平衡（用得很少）*/
.page-balanced {
  column-fill: balance-all;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* column-span 的用法 */

/* 横跨所有列 */
.spanning-header {
  column-span: all;  /* 横跨所有列 */
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

/* 不横跨（默认）*/
.no-span {
  column-span: none;  /* 默认值 */
}

/* 使用 column-span 的完整示例 */
.magazine-layout {
  column-count: 3;
  column-gap: 30px;
  text-align: justify;
}

.magazine-layout h1 {
  column-span: all;  /* 标题横跨所有列 */
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
}

.magazine-layout h2 {
  column-span: all;  /* 小标题也横跨 */
  font-size: 1.5em;
  margin-top: 20px;
  margin-bottom: 10px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<article class="magazine-layout">
  <h1>杂志风格标题（横跨所有列）</h1>

  <p>这是第一段正文，会分列显示...</p>
  <p>这是第二段正文...</p>

  <h2>章节标题（也横跨所有列）</h2>

  <p>这是新章节的正文...</p>
</article>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* ⚠️ column-span 的限制 */

/* 1. 只能设置为 all 或 none，不支持部分跨列 */
.limited-span {
  column-span: all;  /* 只能全跨，不支持 column-span: 2 */
}

/* 2. 跨列元素会打断内容的流动，把多列"切成上下两段" */
.spanning-element {
  column-span: all;
  /* 它会把多列分成两个"列组"：
     上面那部分内容先在列里排完（且会自动平衡高度），
     跨列元素自己横跨整个容器宽度，
     跨列元素下面的内容再从第一列开始重新分列。 */
}

/* 3. 跨列元素后的内容会重新开始分列 */
.after-span {
  /* 这个内容会在跨列元素下方"从第一列重新开始" */
}

1
2
3
4
5
6
7

/* break-inside 的用法 */

/* 防止元素被分割 */
.no-break {
  break-inside: avoid;  /* 防止元素被截断到两列 */
  /* 也可以用 page-break-inside: avoid（兼容旧浏览器）*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/* 1. 防止卡片被截断 */
.multi-column-cards {
  column-count: 3;
  column-gap: 20px;
}

.card {
  break-inside: avoid;  /* 防止卡片被截断 */
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 12px;
}

.card h3 {
  margin-bottom: 8px;
}

/* 2. 防止段落被截断 */
.article-columns {
  column-count: 2;
  column-gap: 40px;
}

.article-columns p {
  break-inside: avoid;  /* 防止段落被截断 */
  margin-bottom: 1em;
}

/* 3. 防止图片被截断 */
.image-column {
  column-count: 2;
}

.image-column figure {
  break-inside: avoid;
  margin-bottom: 20px;
}

.image-column img {
  width: 100%;
  display: block;
}

.image-column figcaption {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 打印友好的分列布局 */

.print-columns {
  column-count: 2;
  column-gap: 30px;
  column-rule: 1px solid #ccc;
}

.print-columns .figure {
  break-inside: avoid-page;  /* 防止图片被分页 */
  margin-bottom: 20px;
}

.print-columns .quote {
  break-inside: avoid-page;  /* 防止引用被分页 */
  padding: 16px;
  background-color: #f8f9fa;
  border-left: 4px solid #3498db;
}

/* 打印样式 */
@media print {
  .print-columns {
    column-count: 2;
    column-gap: 20mm;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* break-before 和 break-after */

/* —— 通用值：不分场景，一律"尽量别在这里断" —— */
.avoid-break-before {
  break-before: avoid;
  /* 在此元素前尽量不换列、也不换页 */
}

/* —— 只在某一种场景下避免断 —— */
.avoid-page-before {
  break-before: avoid-page;    /* 打印时：尽量不在元素前换页 */
}

.avoid-column-before {
  break-before: avoid-column;  /* 排版时：尽量不在元素前换列 */
}

/* —— 强制断开 —— */
.force-column-before {
  break-before: column;        /* 强制从这个元素开始新的一列 */
}

.force-page-before {
  break-before: page;          /* 强制从这个元素开始新的一页（打印） */
}

/* break-after 的取值完全一样，只是控制"元素之后" */
.avoid-break-after {
  break-after: avoid;
}

.force-column-after {
  break-after: column;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* 完整的多列布局示例 */

.complete-columns {
  column-count: 3;
  column-width: 250px;
  column-gap: 30px;
  column-rule: 1px solid #e0e0e0;
}

/* 标题横跨所有列 */
.complete-columns h1,
.complete-columns h2 {
  column-span: all;
  text-align: center;
  margin-bottom: 20px;
}

/* 章节标题在列之间适当分隔 */
.complete-columns h3 {
  break-after: avoid;  /* 防止章节标题后立即换列 */
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 图片和引用不被截断 */
.complete-columns figure,
.complete-columns blockquote {
  break-inside: avoid;
  margin: 16px 0;
}

/* 列表项不被截断 */
.complete-columns li {
  break-inside: avoid;
  margin-bottom: 8px;
}

/* 代码块不被截断 */
.complete-columns pre,
.complete-columns code {
  break-inside: avoid;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* 打印分页控制（传统写法）*/

/* 避免在元素前分页 */
.no-page-break-before {
  page-break-before: avoid;  /* 避免在元素前换页 */
}

/* 强制在元素前分页 */
.force-page-break-before {
  page-break-before: always;  /* 强制在元素前开始新页 */
}

/* 避免在元素后分页 */
.no-page-break-after {
  page-break-after: avoid;  /* 避免在元素后换页 */
}

/* 强制在元素后分页 */
.force-page-break-after {
  page-break-after: always;  /* 强制在元素后开始新页 */
}

/* 现代写法（推荐）*/
.modern-break {
  break-before: page;   /* ✅ 强制换页（Chrome / Safari / Firefox 都支持） */
  break-after: page;
}

/* 兼容性写法 */
.compatible-break {
  page-break-before: always;  /* 旧浏览器走这条 */
  break-before: page;         /* 现代浏览器走这条 */
  /* 两条都写也没问题：老的 page-break-* 在新浏览器里被当作 break-* 的别名，
     写法一致、结果一致，不会互相打架。 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* 打印样式优化 */

@media print {
  /* 打印时减少列数或使用单列 */
  .article {
    column-count: 1 !important;
  }

  /* 防止标题被分页 */
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* 防止图片、表格、引用被分页 */
  img, table, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 强制章节标题在新页开始 */
  .chapter-title {
    page-break-before: always;
    break-before: page;   /* ⚠️ 别写成 always：Chrome / Safari 不认这个值 */
  }
}