CSS columns分栏布局和break-inside属性

Multiple-column布局，也称多列布局、多栏布局，我自己喜欢叫做分栏布局，这种布局可以讲内容布局到一组列框，类似于报纸上的排版。

 

分栏布局非常特殊，有别于传统布局方法，它将包括包括所有子元素在内的所有内容拆分为列，这与我们打印网页时候时页面内容分割成不同的页面的方式类似。

分栏布局IE10+都可以使用，API稳定，移动端兼容性比flex布局要好，虽然设计初衷不一样，但很多布局都可以实现。甚至某些场景下，只能使用分栏布局才能实现。很有学习的必要。

直接相关CSS属性（这里主要就说column-width和break-inside）

1.column-width

column-width表示每一栏/列的最佳宽度。

如果我们只设定column-width，浏览器会自动根据现有容器宽度划分栏目的个数。

语法如下：

column-width: <length> | auto;

其中：

<length>

表示设定的最佳列宽值。实际呈现的每一栏的宽度可能与指定值不同，具体内容参见下面的细节描述。

auto

默认值。表示每一栏的宽度由其它CSS属性决定，例如column-count。

一些细节：

1. column-width 有时候会无效。例如容器宽度400像素，设定的每一栏宽度是300像素，不足以分栏，此时内容填充填充表现为充分利用可用空间，最终呈现的列宽比设定的更宽。又例如容器宽度400像素，column-width设置为500像素，则最终分栏宽度不会超过容器宽度，比设定的500像素要小。
2. column-width 不支持负值，也不支持百分比值。

2.break-inside

break-inside这个CSS属性定义页面、列或区域发生中断时候的元素该如何表现。如果没有中断，则忽略该属性。

break-inside支持属性相对少一些，同样的，我们目前只要关注下面两个属性值就好了：

break-inside: auto;
break-inside: avoid;

其中：

auto

元素可以中断。

avoid

元素不能中断。

有时候，我们希望我们的条目一个元素一个元素都是独立的，前后都不断开，此时，就可以使用break-inside:avoid实现：

此时效果如下截图：