多栏布局介绍
Multiple-column布局，也称多列布局、多栏布局，我习惯称之为分栏布局。这种布局可以将包括所有子元素在内的所有内容拆分为列，与报纸上排版类似。分栏布局在IE10及以上版本都可以使用，API稳定，在移动端兼容性比flex布局要好。
与分栏布局相关的CSS属性包括：
- 直接相关属性：
column-width,column-count,columns - 间接相关属性：
column-rule-color,column-rule-style,column-rule-width,column-rule,column-span,column-fill,column-gap,break-after,break-before,break-inside
直接相关CSS属性
-
column-width
- 语法：
column-width : <length> | auto; - 默认值：
auto - 细节：容器宽度不足以分栏时，内容填充会尽可能利用可用空间，最终列宽可能大于设定值。
- 语法：
-
column-count
- 语法：
column-count : <integer> | auto; - 默认值：
auto - 细节：具体的分栏数取决于具体的使用场景。
- 语法：
-
columns
- 例子：
columns : 18em;与columns : 2;
- 例子：
-
column-rule-color
- 语法：
column-rule-color : <color> - 默认值：当前
color属性的计算值。
- 语法：
-
column-rule-style
- 使用例子：
column-rule-style : dotted;,column-rule-style : dashed;
- 使用例子：
实地演示与使用效果
实际布局表现根据设置的column-width和column-count属性值有所不同。不同属性值下可能变更栏目数或列宽，实现不同的布局效果。建议在PC端浏览器体验以感受差异。
三栏示范代码：
.column-style {
column-count: 3; /* 设定分为三栏 */
column-width: 200px;
}
这段代码将容器内容分为三栏，每栏的宽度为200px。