欢迎来到CSS多列文本布局讲座
大家好，欢迎来到今天的CSS技术讲座！今天我们要聊的是一个非常实用的属性——columns。它能让你轻松创建多列文本布局，让网页看起来更像报纸或杂志，超级酷炫！废话不多说，让我们直接进入正题吧！
什么是 columns？
columns 是 CSS 中的一个复合属性，它可以帮助你将内容分成多列显示。想象一下，你在读一份报纸，上面的文字通常是分成几列排列的，这样可以更好地利用页面空间，阅读起来也更加舒适。columns 就是帮你实现这种效果的神器。
在 CSS 中，columns 可以控制两件事：
- 列的数量：你想把内容分成多少列。
- 列的宽度：每一列的宽度是多少。
你可以通过 columns 属性一次性设置这两项，也可以分别使用 column-count 和 column-width 来单独控制它们。
语法
columns: <column-width> || <column-count>;<column-width>：指定每列的宽度（可选）。<column-count>：指定列的数量（可选）。
如果你只指定了其中一个值，浏览器会自动调整另一个值以适应内容。
示例 1：固定列数
如果你想让文本分成三列显示，可以这样写：
.columns-example {
columns: 3;
}这段代码的意思是：“把内容分成三列，具体宽度由浏览器根据容器大小自动调整。”
示例 2：固定列宽
如果你更关心列的宽度，而不是具体的列数，可以这样做：
.columns-example {
columns: 200px;
}这段代码的意思是：“每列的宽度为 200 像素，具体的列数由浏览器根据容器宽度自动调整。”
示例 3：同时指定列数和列宽
你也可以同时指定列数和列宽，这样可以更精确地控制布局：
.columns-example {
columns: 3 200px;
}这段代码的意思是：“把内容分成三列，每列的宽度为 200 像素。”
更多相关属性
除了 columns 之外，还有一些与多列布局相关的属性，它们可以帮助你进一步优化布局效果。让我们一起来看看这些“小帮手”吧！
1. column-gap
column-gap 用于设置列之间的间距。默认情况下，列之间的间距是 1em，但你可以根据需要调整这个值。
.columns-example {
columns: 3;
column-gap: 40px; /* 设置列之间的间距为 40 像素 */
}2. column-rule
column-rule 可以为列之间添加一条分隔线，类似于表格中的边框。它有三个子属性：column-rule-width、column-rule-style 和 column-rule-color。
.columns-example {
columns: 3;
column-gap: 40px;
column-rule: 2px dashed #ccc; /* 添加一条 2 像素宽的虚线分隔线，颜色为浅灰色 */
}3. column-span
column-span 可以让某个元素跨越多列显示。通常用于标题或重要的内容块，使其在所有列中占据主导位置。
.columns-example h2 {
column-span: all; /* 让 h2 标题跨越所有列 */
}4. break-inside 和 break-after
有时候，你可能不希望某些元素被拆分到不同的列中。比如，一张图片不应该被分成两半，或者一段代码不应该被截断。这时，break-inside 和 break-after 就派上用场了。
break-inside: avoid;：防止元素被拆分到不同的列中。break-after: avoid-column;：防止元素后面的内容被拆分到下一页或下一列。
.columns-example img {
break-inside: avoid; /* 防止图片被拆分到不同列中 */
}实战演练：创建一个漂亮的多列文章布局
现在，我们来动手实践一下，创建一个包含多列文本的文章布局。假设我们要设计一个博客页面，文章内容分为三列显示，标题跨越所有列，段落之间有一些间距，图片不会被拆分。
HTML 结构
<div class="article">
<h2>如何成为一名优秀的前端开发者</h2>
<p>作为一名前端开发者，你需要掌握 HTML、CSS 和 JavaScript 等核心技术...</p>
<img src="coding.jpg" alt="编程图">
<p>除了技术能力，沟通能力和团队合作也是至关重要的...</p>
</div>CSS 样式
.article {
columns: 3;
column-gap: 40px;
column-rule: 2px dashed #ccc;
}
.article h2 {
column-span: all;
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
}
.article p {
line-height: 1.6;
margin-bottom: 20px;
}
.article img {
max-width: 100%;
height: auto;
break-inside: avoid;
}效果说明
- 文章内容被分成三列显示，列之间的间距为 40 像素，并且有一条浅灰色的虚线分隔线。
- 标题
h2跨越所有列，居中对齐，字体较大，底部有 20 像素的间距。 - 段落之间有一定的行高和间距，使阅读更加舒适。
- 图片不会被拆分到不同的列中，始终保持完整显示。
浏览器兼容性
columns 属性在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge。不过，IE 浏览器对它的支持较差，如果你还需要支持 IE，建议使用一些 polyfill 或者考虑其他替代方案。
根据 MDN Web Docs 的文档，columns 属性在以下浏览器中是完全支持的：
| 浏览器 | 版本 |
|---|---|
| Chrome | 50+ |
| Firefox | 52+ |
| Safari | 9+ |
| Edge | 16+ |
总结
好了，今天的讲座就到这里啦！通过 columns 属性，我们可以轻松创建多列文本布局，提升网页的美观度和可读性。结合 column-gap、column-rule、column-span 等相关属性，你可以进一步优化布局效果，打造出更加专业的页面。
如果你还有任何问题，欢迎在评论区留言，我会尽力帮助你解决！下次见，祝你 coding 快乐！ ?
参考资料：