分栏布局 – 简介
将子元素拆分为列，使用场景并不多，重点掌握 columns 和 column-gap，其他用得少，简单了解下即可。
优点：
不会改变元素原本的display计算值
<ul style = "columns: 2;"> <li>重庆市</li> <li>哈尔滨市</li> <li>长春市</li> <li>兰州市</li> <li>北京市</li> <li>杭州市</li> <li>长沙市</li> <li>沈阳市</li> <li>成都市</li> <li>合肥市</li> <li>天津市</li> <li>西安市</li> </ul>
以下为相关属性详解：
columns 列宽和列数
columns是column-width和 column-count的缩写
/* 栏目宽度 */ columns: 18em; /* 栏目数目 */ columns: auto; columns: 2; /* 同时定义宽度和数目，顺序任意 */ columns: 2 auto; columns: auto 2;
column-width和 column-count都是期望值，最终的分栏表现规则为：统一转换column-count值，哪个值小就使用哪一个。
/* 最终2栏显示 */ .container-1 { width: 360px; column-count: 2; column-width: 100px; } /* 最终3栏显示 */ .container-2 { width: 360px; column-count: 4; column-width: 100px; }
column-width 不支持百分比值
column-gap 分栏间隙
/* 关键字属性值 */ column-gap: normal; /* 长度值 */ column-gap: 3px; column-gap: 3em; /* 百分比值 */ column-gap: 3%;
gap属性实际上是column-gap属性和row-gap属性的缩写，所以也可以用gap来简化代码（IE暂不支持）
.container { columns: 2; gap: 1rem; }
column-rule 分栏分割线
column-rule属性是column-rule-width、column-rule-style和column-rule-color这3个CSS属性的缩写，和border类似。
column-rule: dashed deepskyblue;
效果见 https://demo.cssworld.cn/new/6/1-3.php
column-span 跨栏
none表示不横跨多栏，默认值。all表示横跨所有垂直列。
效果见 https://demo.cssworld.cn/new/6/1-4.php
常用于在分栏布局中插入广告
column-fill 分栏填充方式
auto的作用是按顺序填充每一列，内容只占用它需要的空间，需配合容器元素的height属性一起使用。balance是默认值，作用是尽可能在列之间平衡内容。在分隔断开的上下文中，只有最后一个片段是平衡的。例如，有多个<p>元素，正好最后一个<p>换行了，那这个<p>元素的内容前后等分，保持平衡。这会造成最后一栏内容较少的问题。
balance-all的作用是尽可能在列之间平衡内容。在分隔断开的上下文中，所有片段都是平衡的。该属性值目前没有任何浏览器支持，可以忽略。
效果见 https://demo.cssworld.cn/new/6/1-5.php
break-inside 控制内容中断
auto表示元素可以中断。avoid表示元素不能中断。
还可以在页面打印时控制某个元素不跨页。
效果见 https://demo.cssworld.cn/new/6/1-7.php
box-decoration-break 控制装饰中断
兼容性不佳，了解即可。
slice为默认值，表示各个元素断开的部分如同被切开一般。clone表示断开的各个元素的样式独自渲染。
【用Firefox浏览器查看】效果见 https://demo.cssworld.cn/new/6/1-8.php
经典应用——两端对齐
只适用于单行的两端对齐
column-count: 3; column-gap: 5%;
效果见 https://demo.cssworld.cn/new/6/1-6.php
经典应用——电子书水平翻页阅读效果
详见 https://www.zhangxinxu.com/wordpress/2017/02/css3-multiple-column-layout-read-horizontal/
