容器的属性
column-width: auto | < length > 。给列定义一个最小宽度(min-width)。
- auto: 列宽由其他元素决定。
- length: 显式设置最小宽度。
column-count: auto | < integer >定义列的数量。
- auto: 元素只有一列。就像没有设置一样。
- < integer >: 正整数值。取值是大于0的整数,负值无效。
columns: < column-width > || < column-count >。是column-width和column-count的简写。次序随意。
列宽 = ( 父元素宽度 - (列数-1) 列间隙 ) / 列数*
比如:父元素40em,分为4列,列间隙为2em。那么列宽为( 40 - (4-1) * 2) / 4 = 8.5em。
如果显式设置的列宽小于这个宽度,它会以这个宽度展示。
如果显式设置的列宽大于这个宽度,它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。
column-gap: normal | < length >。定义列间距。值过大时会撑破布局。
- normal: 默认值,由浏览器解析,一般是lem。
- < length >: 有浮点数字和单位标识符组成的长度值。如:2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >。定义列边框。
它的中心线始终和列间距的中心线一样。换言之,它总处于两列的中间。和border类似。如果列边框大于列间距,并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样(背景效果)。
column-fill: auto | balance。定义多列中每一列的高度是否统一。
这个属性很奇怪。并且在浏览器中不统一。它有两个值:auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的,发现这两个属性并没有区别。在firefox49中测试,这两个属性是有区别的,其中balance是每列高度差不多(对齐),auto就自动合并成一列了,无论自己设置的是多少列。
项目(元素)的属性
column-span: none | all。定义一个元素横跨多少列。
如果我们常将标题横跨所有列。那么,column-span: all。其默认值是,column-span: none;表示不跨列。