多列布局
1 多列布局介绍
实现类似于报纸的布局方式
2 多列布局的相关CSS属性
columns 设置的列数和每列的宽度。复合属性
columns:<' column-width '> || <' column-count '>
column-width 设置每列的宽度(类似于最小宽度)
取值:
auto: 根据
column-count
> 自定分配宽度length: 用长度值来定义列宽。不允许负值
column-count 设置列数
取值:
auto: 根据
column-width
自定分配宽度number: 用整数值来定义列数。不允许负值
column-gap 设置列与列之间的间隙
取值:
normal: 与
font-size
大小相同。假设该对象的font-size
为16px,则normal值为16px,类推。length : 用长度值来定义列与列之间的间隙。不允许负值 。
column-rule 列与列之间的边框,复合属性 同border类似
column-rule:<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
column-rule-width 列与列之间的边框厚度
取值:
length: 用长度值来定义边框的厚度。不允许负值
medium: 定义默认厚度的边框。
thin: 定义比默认厚度细的边框。
thick: 定义比默认厚度粗的边框。
column-rule-style 列与列之间的边框样式
取值:
none: 无轮廓。
column-rule-color
与column-rule-width
将被忽略hidden: 隐藏边框。
dotted: 点状轮廓。
dashed: 虚线轮廓。
solid: 实线轮廓
double: 双线轮廓。
groove: 3D凹槽轮廓。
ridge: 3D凸槽轮廓。
inset: 3D凹边轮廓。
outset: 3D凸边轮廓。
column-rule-color 列与列之间的边框颜色
column-span 对象元素是否横跨所有列
取值:
none: 不跨列 (默认)
all: 横跨所有列
column-fill 所有列的高度是否统一
取值:
auto: 列高度自适应内容 (默认)
balance: 所有列的高度以其中最高的一列统一
column-break-before 对象之前是否断行
取值:
auto: 既不强迫也不禁止在元素之前断行并产生新列 (默认)
always: 总是在元素之前断行并产生新列
avoid: 避免在元素之前断行并产生新列
column-break-after 对象之后是否断行
取值:
auto: 既不强迫也不禁止在元素之后断行并产生新列
always: 总是在元素之后断行并产生新列
avoid: 避免在元素之后断行并产生新列
column-break-inside 对象内部是否断行
取值:
auto: 既不强迫也不禁止在元素内部断行并产生新列 (默认)
avoid: 避免在元素内部断行并产生新列