Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章 | https://0x9.me/KMrv3 |
multi-column多列布局实现瀑布流
先简单的讲下multi-column相关的部分属性
- column-count设置列数
- column-gap设置列与列之间的间距
- column-width设置每列的宽度
还要结合在子容器中设置break-inside
防止多列布局,分页媒体和多区域上下文中的意外中断
1 | break-inside属性值 |
column属性介绍
1.columns:<’ column-width ‘> || <’ column-count ‘>
设置或检索对象的列数和每列的宽度。复合属性
1 | /*列数及列宽固定*/ |
2.column-width:<’ length ‘> | auto
设置或检索对象每列的宽度;
auto:根据 <’ column-count ‘> 自定分配宽度
1 | /*列宽固定,根据容器宽度液态分布列数*/ |
3.column-count:<’ integer ‘> | auto
设置或检索对象的列数;
auto:根据 <’ column-width ‘> 自定分配宽度
1 | /*列数固定,根据容器宽度液态分布列宽*/ |
4.column-gap:<’ length ‘> | normal
设置或检索对象的列与列之间的间隙
1 | /*固定列间隙为40px*/ |
5.column-rule:<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color ‘>
设置或检索对象的列与列之间的边框。复合属性
1 | /*在列与列之间设置绿色间隔线*/ |
6.column-rule-width:<’ length ‘> | thin | medium | thick
medium:定义默认厚度的边框;
thin:定义比默认厚度细的边框;
thick:定义比默认厚度粗的边框
7.column-fill:auto | balance
设置或检索对象所有列的高度是否统一;
auto: 列高度自适应内容;
balance: 所有列的高度以其中最高的一列统一
8.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之前是否断行;
auto: 既不强迫也不禁止在元素之前断行并产生新列;
always: 总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列
9.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之后是否断行
10.column-break-inside:auto | avoid | avoid-page | avoid-column
设置或检索对象内部是否断行;
auto:既不强迫也不禁止在元素内部断行并产生新列;
avoid:避免在元素内部断行并产生新列
演示代码
1 |
|