CSS3 columns 属性（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页设计中，文字和内容的排版布局一直是开发者关注的核心问题之一。随着 CSS3 的发展，columns 属性 为开发者提供了一种高效且直观的多栏布局解决方案。无论是报纸风格的新闻列表、杂志式的文章排版，还是需要灵活调整列数的响应式设计，这一属性都能通过简洁的代码实现复杂效果。本文将从基础概念到高级技巧，结合实际案例，帮助读者系统掌握 CSS3 columns 属性 的使用方法与应用场景。

基础概念：什么是 CSS3 Columns 属性？

CSS3 columns 属性 是一组用于创建多栏布局的 CSS 属性集合，灵感来源于传统印刷排版中的报纸或杂志分栏设计。它允许开发者通过简单的声明，将文本或块级元素自动分配到指定数量或宽度的列中。

核心属性解析

以下是 columns 属性 的核心成员：

1. columns：复合属性，同时设置 column-width 和 column-count（需按顺序书写）。
2. column-count：定义列的数量。
3. column-width：定义每列的理想宽度，浏览器会根据可用空间自动调整列数。
4. column-gap：设置列与列之间的间隔距离。
5. column-rule：为列与列之间添加边框线（类似分隔线）。

图形化比喻：理解分栏的运作逻辑

想象你正在用报纸排版：

• column-count 就像告诉排版软件“我要把文章分成 3 列”；
• column-width 则像指定“每列宽度为 200 像素，列数由系统自适应”；
• column-gap 是两列之间的留白，而 column-rule 就像用铅笔在列间画出一条虚线。

进阶用法：属性详解与案例演示

1. 基础分栏：column-count 与 column-width

案例 1：固定列数

.multi-column {  
  column-count: 3; /* 强制分成 3 列 */  
  column-gap: 20px; /* 列间距为 20px */  
  column-rule: 1px solid #ddd; /* 添加灰色分隔线 */  
}  

<div class="multi-column">  
  这里放置大量文本或图片...  
</div>  

效果：无论容器宽度如何变化，内容始终严格分为 3 列，列宽由容器宽度自动计算。

案例 2：自适应列宽

.adaptive-columns {  
  column-width: 200px; /* 每列宽度设为 200px */  
  column-gap: 1em; /* 使用相对单位 */  
}  

逻辑：浏览器会根据容器宽度，计算出能容纳多少列（如容器宽 800px，则显示 4 列）。若内容超出容器，会自动增加列数。

2. 细致控制：分栏间距与边框

案例 3：动态调整分栏间距

/* 通过媒体查询实现响应式分栏 */  
@media (max-width: 768px) {  
  .responsive-columns {  
    column-count: 2;  
    column-gap: calc(5% + 10px); /* 结合相对与绝对单位 */  
  }  
}  

优势：在小屏幕上减少列数并增大间距，提升可读性。

案例 4：自定义分隔线样式

/* 分隔线为 2px 虚线红色 */  
.column-rule-example {  
  column-rule: 2px dashed crimson;  
  column-rule-color: crimson; /* 单独修改颜色 */  
}  

3. 高级技巧：内容分栏与特殊场景

案例 5：非文本内容的分栏布局

<div class="grid-like-columns">  
  <div class="item">卡片1</div>  
  <div class="item">卡片2</div>  
  <!-- 多个 item -->  
</div>  

.grid-like-columns {  
  column-count: 3;  
  /* 确保子元素在列内垂直排列 */  
  .item {  
    break-inside: avoid; /* 防止卡片内容跨列 */  
    margin: 10px;  
  }  
}  

效果：卡片类元素会均匀分布在多列中，类似网格布局。

案例 6：结合 Flexbox 布局

/* 混合使用 columns 和 Flexbox */  
.complex-layout {  
  display: flex;  
  flex-direction: column;  
  .header { /* 固定高度的头部 */  
    height: 100px;  
  }  
  .content {  
    flex: 1;  
    column-count: 2;  
    column-gap: 15px;  
  }  
}  

实战案例：构建响应式文章布局

需求：

• 在桌面端显示 3 列文章摘要；
• 移动端自动切换为单列；
• 添加分隔线和阴影效果。

HTML 结构

<section class="article-list">  
  <article>  
    <h2>标题</h2>  
    <p>摘要文本...</p>  
  </article>  
  <!-- 多个 article -->  
</section>  

CSS 实现

.article-list {  
  column-count: 3;  
  column-gap: 30px;  
  column-rule: 1px solid #e0e0e0;  
  padding: 20px;  
  margin: 0 auto;  
  max-width: 1200px;  
}  

/* 移动端适配 */  
@media (max-width: 767px) {  
  .article-list {  
    column-count: 1;  
    padding: 15px;  
  }  
}  

/* 防止文章跨列 */  
.article-list article {  
  break-inside: avoid;  
  background: #fff;  
  padding: 15px;  
  margin: 10px 0;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
}  

效果：桌面端呈现整齐的三栏布局，移动端自动切换为单列，同时保持内容完整性。

兼容性与常见问题

浏览器支持

columns 属性 在现代浏览器中得到广泛支持，但需注意：

• Internet Explorer 未完全支持，需通过 behavior 属性或 polyfill 解决；
• 部分旧版浏览器可能需要添加厂商前缀（如 -webkit-columns）。

常见问题与解决方案

总结与最佳实践

核心知识点回顾

1. columns 属性 是实现多栏布局的高效工具，适用于文本、卡片等多样化内容；
2. 通过 column-count 和 column-width 可控制列数与宽度，二者结合使用更灵活；
3. 分栏间距和边框能显著提升视觉层次感；
4. 结合媒体查询可实现响应式布局。

开发建议

• 优先使用 column-width：让浏览器根据容器宽度自适应列数，提升兼容性；
• 测试跨浏览器表现：尤其注意旧版浏览器的兼容处理；
• 结合其他布局技术：与 Flexbox 或 Grid 混合使用，扩展布局可能性；
• 保持内容完整性：对关键元素添加 break-inside: avoid。

通过本文的系统讲解和案例演示，开发者可以快速掌握 CSS3 columns 属性 的核心用法，并将其应用于实际项目中，打造更优雅、灵活的网页布局。