CSS 列 | CSS Columns

在CSS列标准是一个CSS模块，增加了对多列布局的CSS支持。通过CSS Columns引入的属性，无需手动编码复杂而脆弱的结构，生成这些柱状布局变得更加容易和可靠。支持包括建立一个布局的列数，以及内容应该如何流动列，间隙大小，列分隔线（称为列规则），等等。

css多列布局基础

用于生产CSS列布局的三个关键特性是column-count，column-width和column-gap。其他属性提供了一些方法来微调在使用这些属性构建的布局结构中如何组织和渲染事物的细节，但是要弄清楚这四者通常处理的地方的工作。

前两个特性，column-count并且column-width，都是最重要的，最有可能产生误导。理解这一点很重要：

该column-count属性指定用于呈现文本的最大列数。浏览器会考虑可用的水平空间量，值的大小column-width和值column-gap，然后绘制可以放入可用空间的最大列数。

该column-width属性指定了一个给定值的最小列宽<length>。浏览器创建的每一列至少是这个宽，但可能更宽。在确定了要绘制的列数之后，剩余的水平空间可以由列中的浏览器划分并且添加到它们的宽度。

那么，在某种程度上，它们更像是建议而不是硬性规定。一旦你考虑它的逻辑，这是有道理的。

这使得CSS多列布局能够响应和适应屏幕宽度，同时也支持页面的整体布局和作者的意图。当包含空间（或屏幕）的宽度缩小时，浏览器将减少它创建的列数，调整剩余列的宽度以确保整个宽度与预期的一致。

另一件你可以控制的是柱列之间的距离，也就是列间隙。列间隙可以使用column-gap属性来控制。按照惯例，默认的差距是1em，但是在任何给定的浏览器中，这可能是也可能不是这样，所以如果对你很重要，明确地设置它。与列数和宽度不同，列间距不会被浏览器调整，因为它会尝试将内容放入可用空间。

看看下面的例子，你可以使用顶部的范围控件来调整包含元素的列的宽度。

该column-fill属性也影响布局。默认情况下，浏览器将尽可能多地创建适当大小的列，然后平衡它们之间的内容，使每列大致相同。但是，如果您希望浏览器将第一列填充到最大高度，然后再转到下一列，则可以设置column-fill为auto（而不是默认值balance）。

但是，如果对列高没有限制，则只会创建一个列，因为它永远不会达到其最大高度以触发包装到第二列，所以请确保将列放置在限制其列的容器中高度，通过使用height或max-height。

虽然CSS规范定义的break-before，break-after和break-inside属性来帮助跨区域，列或页面边界元素的控制包装纸，这些属性一般不会广泛实施而此时在现实世界中的代码使用。

您可以指定使用在每列间隙可以在布局的渲染输出每列之间绘制的中心绘制的列规则分界线column-rule-style，column-rule-width和column-rule-color性能，或简写属性column-rule。

使用CSS多列布局关于如何使用多列构建布局的详细教程。

Specification	Status	Comment
CSS Multi-column Layout Module	Candidate Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes) -webkit	9 (9)-moz 52 (52)	10	11.10 15-webkit	3.0 (522)-webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1-webkit	22.0 (22)-moz 52.0 (52)	10	11.5 32-webkit	3.2-webkit

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18