⌾ 365betapp下载
（6.1）分栏布局
6.1 分栏布局
分栏布局也被称为多列布局、多栏布局，这种布局可以将内容布局到多个列框中，类似报纸上的排版。
分栏布局比较特殊，有别于传统布局，它将子元素在内的所有内容拆分为列，这与打印网页的时候将网页内容分成多个页面的方式类似。分栏布局主要针对图文排版布局，应用在横向排版场景中，文档流是倒N方向。有个别布局只能使用分栏布局实现，分栏布局虽然在日常开发中用得不多，但是遇到合适的场景时是一种非常有用的布局方式。
IE10+浏览器都可以使用分栏布局，API稳定，在移动端的兼容性比弹性布局要好，可以放心使用。例如，有一段无序列表，可以看到每一个列表项的内容很少，如果容器的宽度足够，则可以使用columns属性实现分栏布局，让排版更舒服。
HTML
- 重庆市
- 哈尔滨市
- 长春市
- 兰州市
- 北京市
- 杭州市
- 长沙市
- 沈阳市
- 成都市
- 合肥市
- 天津市
- 西安市
CSS
ul {
columns: 2;
}
相比其他布局方法，分栏布局最大的优点是不会改变元素原本的display计算值。例如，在默认状态下，
与分栏布局相关的CSS属性共有以下10个：
● columns；(重点)
● column-width；
● column-count；
● column-rule；
● column-rule-color；
● column-rule-style；
● column-rule-width；
● column-span；
● column-fill；
● column-gap;(关注)
虽然这10个CSS属性都有各自的作用，但是在实用程度上却有明显的差异。根据我的开发经验，超过80%的分栏布局只需要使用columns属性就足够，因此，大家的学习重心可以放在columns属性上，column-gap属性有时候也会用到，所以也可以关注下，至于剩下的属性，大家了解一下基本作用即可。
6.1.1 重点关注columns属性
columns属性是column-width和column-count属性的缩写，举几个使用columns属性的例子：
/*栏目宽度*/
columns: 18em;
/*栏目数目*/
columns: auto;
columns: 2;
/*同时定义宽度和数目，顺序任意*/
columns: 2 auto;
columns: auto 2;
columns: auto 12em;
columns: auto auto;
因此，关注columns属性本质上就是关注column-width和column-count这两个CSS属性。
1．关于column-width
column-width 表示每一栏/列的最佳宽度，注意，是“最佳宽度”，实际渲染宽度多半和指定的宽度是有出入的。
最佳宽度
几乎不存在分栏布局的栏目宽度就是 column-width 设置的宽度这样的场景。
因为column-width和传统的width属性不同，column-width 更像是一个期望尺寸，浏览器会根据这个期望尺寸确定分栏数目，一旦分栏数目确定了，column-width属性的使命也就完成了，接下来根据分栏数目对容器进行的分栏布局就和column-width属性没有任何关系了。
没错，column-width属性在分栏布局中就是一个工具属性。
不支持百分比。
column-width:30%; /*不合法*/
2．关于column-count
column-count表示理想的分栏数目，又出现了很微妙的词——“理想的”，也就是意味着最终的分栏数目可能不受column-count属性值的控制。
在分栏布局中，最终分栏的数量要么由column-count属性决定，要么由column-width属性决定，这两个CSS属性都可能有更高的决定权。
决定权优先级的计算诀窍可以用一句话概括：统一转换column-count值，哪个值小就使用哪一个。例如，下面的CSS代码：
具体解析过程如下。
（1）.container-1元素宽度为360px，因此column-width:100px换算成column-count的值是3.6，而.container-1元素已经设定了column-count:2，遵循“哪个值小哪个优先级高”的规则，最终.container-1元素的内容分成了2栏。
（2）.container-2元素设置的是column-count:4，比column-width:100px换算成的column-count值大，因此，最终.container-2元素的内容分成了3栏（3.6栏向下取整）。
另外，从.container-2的效果可以看出，分栏布局的每一栏的高度并不总是相等的，内容的分割也不总是均匀的，浏览器有一套自己的算法。
6.1.2 column-gap 和 gap 属性的关系（直接用gap）
column-gap 属性表示每一栏之间的空白间隙的大小，可以是长度值，也可以是百分比值，语法示意如下：
/*关键字属性值*/
column-gap: normal;
/*长度值*/
column-gap: 3px;
column-gap: 3em;
/*百分比值*/
column-gap: 3%;
实际上，在分栏布局中，如果不考虑IE浏览器，我们可以直接使用gap属性设置分栏间隙大小，例如：
.container
{
columns: 2;
gap: 1rem;
}
至于原因，用一句话解释就是：column-gap 是 gap 属性的子属性。
gap属性进行了统一
在网格布局规范制定之后的一段时间，CSS世界中的行与列之间的间隙使用了gap属性进行了统一，也就是分栏布局、弹性布局和网格布局的间隙都全部统一使用gap属性表示，而gap属性实际上是column-gap属性和row-gap属性的缩写。
6.1.3 了解 column-rule、column-span 和 column-fill 属性
高级属性。
1．column-rule 属性
column-rule 属性是 column-rule-width、column-rule-style 和 column-rule-color 这3个CSS属性的缩写，正如border是border-style、border-width和border- color的缩写一样。
.container {
width: 320px;
border: solid deepskyblue;padding: 10px;
column-count: 2;
/*和border规则一样*/
column-rule: dashed deepskyblue;
}
2．column-span 属性
column-span 属性有点类似表格布局中的HTML属性 colspan，表示某一个内容是否跨多栏显示。这个CSS属性是作用在分栏布局的子元素上的。
column-span: none; /* 默认值 */
column-span: all;
none表示不横跨多栏，默认值。
all表示横跨所有垂直列。
例子：设置了column-span:all的“第4段”文字所在的
元素几乎贯穿了整个容器元素
3．column-fill 属性
column-fill 的作用是当内容分栏的时候平衡每一栏填充的内容。
balance是默认值。
auto属性值在Firefox中渲染正确，Chrome中需要固定高度才有效。
balance-all 没有浏览器支持。
column-fill: auto;
column-fill: balance; /* 默认值 */
column-fill: balance-all;/* 没有浏览器支持 */
6.1.4 分栏布局实现两端对齐布局
分栏布局非常适合实现单行的两端对齐布局效果
不需要改变元素的display属性，也不需要定位，只需要设置好column-count属性的值，然后使用column-gap属性设置想要的间隙就好了
demo: https://demo.cssworld.cn/new/6/1-6.php
6.1.5 break-inside 属性与元素断点位置的控制
break-inside属性可以定义页面打印、分栏布局发生中断时元素的表现形式。如果没有发生中断，则忽略该属性
break-inside: auto;
break-inside: avoid; /* 表示元素不能中断 */
demo: https://demo.cssworld.cn/new/6/1-7.php
6.1.6 box-decoration-break 属性与元素断点装饰的控制
chrome 兼容性差。