- columns属性是一个复合属性——列宽(column-width)和列数(column-count),可以同时定义多列的列数和每列的列宽。
columns: <column-width> || <column-count>
- <column-width>:定义多列种每列的宽度。
- <column-count>:定义多列中的列数。
- column-width属性类似于给列定义一个最小宽度(min-width)。
column-width: auto | <length>
- auto:默认值,如果值为auto或者没有显示设置值时,元素多列的列宽将有其他属性来决定。
- <length>:使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能时正值,不能为负值。
column-width单独使用时,当容器超出列宽时,会以多列显示,反之容器宽度小与设置的列宽时,容器将只显示为一列。
- column-count属性主要用来给元素指定想要的列数和允许的最大列数。
column-count: auto | <integer>
- auto:默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。
- <integer>:正整数值,主要用来定义元素的列数,取值为大于0的整数,负值无效。
列数=(容器宽度-间距)/列间距
浏览器对所求列数的值是去余取整,且如果元素设置了列数,不管元素容器的宽度是多少或者间距多少,总是显示固定的列数。
- column-gap属性类似于盒模型中的margin一样,主要用来设置元素分列的列间距,其只能设置列与列之间的间距。
column-gap: normal | <length>
- normal:默认值,主要通过浏览器默认设置时行解析,一般情况下,normal值相当于1em。
- <length>:由浮点数字和单位标识符组成的长度值,主要用来设置列与列之间的距离,常用px、em单位的任何整数值,其值不能为负值。
column-gap可以用来改变相邻列之间距离,但在多列元素同时设置了column-width时,column-gap与column-width等参数之和大于多列元素总宽度时,会导致列被撑破,并将以当前列数减1的列数显示,此时列宽自动调节到适当的列宽。
- column-rule属性主要是用来定义列与列之间的边框宽度、边框样式和边框颜色,有些类似于常用的border属性,但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置。
column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>
- column-rule-width:类似于border-width属性,主要用来定义列边框的宽度,其默认值为medium,该属性接受任意浮点数,但不接受负值。像border-width属性一样,可以使用款见此medium、thick和thin。
- column-rule-style:此值类似于border-style属性,主要用来定义列边框样式,其默认值为none。该属性值与border-style属性值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
- column-rule-color:此值类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。该属性接受所有的颜色。如果不希望显示颜色,也可以将其值设置为transparent(透明色)。
column-rule-width增大并不会影响列的布局,其不占有任何空间位置。
column-rule在Z轴上是介于background和content之间,当column-rule-width宽度增加到超过列与列的间距时,列边框就会自动消失。
- column-span属性主要用来定义一个分列元素中的子元素能跨多少列,有时需要一段内容或一个标题不进行分列,也就是横跨所有列,就可以用该属性实现。
column-span: none | all
- none:默认值,表示不跨越任何列。
- all:跟none值正好相反,表示的是跨越所有列,并定位在列的Z轴之上。
- column-fill属性主要用来定义多列种每一列的高度是否统一。
column-fill: auto | balance
- auto:默认值,各列的高度随其内容的变化自动变化。
- balance:各列的高度将会根据内容最多的一列的高度进行统一。