CSS3 多列布局

CSS3 多列布局

CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。在本文中，我们将介绍CSS3多列布局的基本概念和用法。

多列布局的原理

要创建CSS3多列布局，我们需要指定两个要素：

• 要添加多列效果的容器元素
• 容器元素的多列属性

例如，我们可以为一个带有container类的<div>元素添加多列效果，让它的内容分为三列：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p>
  <p>Phasellus quis leo quis nisl sagittis aliquet. Donec vitae augue vitae leo tincidunt tincidunt. In hac habitasse platea dictumst. Morbi id nisi vitae eros consequat tincidunt. Fusce sed augue quis nisi malesuada ultrices. Curabitur sit amet velit quis nisi ullamcorper vehicula.</p>
  <p>Etiam auctor semper lorem, quis congue lacus consequat et. Mauris vitae sapien ut elit malesuada ullamcorper. Suspendisse potenti. Quisque eget sapien sed justo blandit mattis. Proin euismod leo ut arcu consequat, at posuere nisi commodo.</p>
</div>

.container {
  column-count: 3; /* 设置容器元素分为三列 */
}

这就是CSS3多列布局的基本效果。我们可以使用不同的多列属性来控制列的数量、宽度、间隙、分隔线等细节。

多列属性

CSS3提供了一系列实现多列布局的属性，如下表所示：

属性	描述
column-count	规定容器元素分为几列
column-width	规定每一列的最小宽度
column-gap	规定每一列之间的间隙
column-rule	规定每一列之间的分隔线
column-span	规定一个元素是否跨越所有的列
columns	简写属性，同时设置column-count和column-width

我们可以使用简写属性columns来同时设置列的数量和宽度，也可以分别设置每个属性。

例如，我们可以为一个带有container类的<div>元素添加多列效果，让它的内容分为三列，并且每一列至少200像素宽：

.container {
  columns: 3 200px; /* 设置容器元素分为三列，并且每一列至少200像素宽 */
}

多列样式

除了设置多列布局的基本属性之外，我们还可以使用以下几个属性来给多列添加样式：

• column-gap：规定每一列之间的间隙大小
• column-rule：规定每一列之间的分隔线样式
• column-fill：规定如何平衡每一列的高度

例如，我们可以为一个带有container类的<div>元素添加多列效果，并且给每一列之间添加20像素的间隙和4像素虚线蓝色的分隔线：

.container {
  column-count: 3; /* 设置容器元素分为三列 */
  column-gap: 20px; /* 设置每一列之间的间隙为20像素 */
  column-rule: 4px dashed blue; /* 设置每一列之间的分隔线为4像素虚线蓝色 */
}

多列折断

多列布局中，内容会被拆分成碎片（fragment），并且在每一列之间进行折断（break）。这种折断方式类似于打印网页时候的分页效果。有时候，这种折断方式会影响阅读体验或者美观效果。例如，一个标题或者一个图片被拆分到两个不同的列中。

为了避免这种情况，我们可以使用以下几个属性来控制内容在多列中的折断方式：

• break-before：规定在一个元素之前发生折断
• break-after：规定在一个元素之后发生折断
• break-inside：规定在一个元素内部是否允许发生折断

这些属性可以接受以下几个值：

• auto：默认值，表示按照正常规则进行折断
• avoid：表示尽量避免在该位置发生折断
• always：表示总是在该位置发生折断
• all：表示总是在该位置发生强制性折断
• page：表示总是在该位置发生页面级别折断
• left：表示总是在该位置发生左侧页面级别折断
• right：表示总是在该位置发生右侧页面级别折断
• recto：表示总是在该位置发生正面页面级别折断
• verso：表示总是在该位置发生反面页面级别折断
• column：表示总是在该位置发生多列级别折断

例如，我们可以为一个带有标题和段落的文章添加多列效果，并且让标题总是出现在新的一栏开始处：

<div class="container">
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p>
</div>

.container {
  column-count: 3; /* 设置容器元素分为三列 */
}

h2 {
  break-before: column; /* 设置标题总是出现在新的一栏开始处 */
}

总结

CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。要创建CSS3多列布局，我们需要指定要添加多列效果的容器元素和容器元素的多列属性。我们还可以使用其他属性来控制多列样式和折断方式。

参考资料：
(1) 多列布局 - 学习 Web 开发 | MDN. https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout.
(2) CSS 多列布局 - CSS：层叠样式表 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns.
(3) css3中新增属性：css3多列布局属性的总结（附实例）-css … https://www.php.cn/css-tutorial-407560.html.
(4) CSS column（多列布局） - C语言中文网. http://c.biancheng.net/css3/column.html.