columns属性
- 概念：设置或检索对象的列数和每列的宽度，复合属性
- 语法：columns: <'columns-width'> || <'columns-count'>
- 参数：<'columns-width'> 是指每列的宽度；<'columns-count'>是指列数
// 当column-width和column-count都存在的时候，会优先考虑column-count。
// 优先的意思是指：能放下n列，就放。不能放下n列，就调整列数和宽度。
// 当div的width可以容下column-count列的时候，就放column-count列。然后智能调整column-width。
// 当div的width无法容下column-count列的时候，就自动计算并调整列数（现有column-width可以放多少列）。然后智能调整column-width。
// 当只有column-width的时候，会根据这个列宽计算能放多少列，然后再调整列宽
// 当只有column-count的时候，会放置column-count列，然后再调整列宽
.test {
width: 800px;
border: 10px solid #000;
-webkit-columns: 200px 3;
-moz-columns: 200px 3;
columns: 200px 3;
}
.test2 {
border: 10px solid #000;
-webkit-columns: 200px;
-moz-columns: 200px;
columns: 200px;
}
column-width属性
- 概念：设置或检索对象每列的宽度
- 语法：column-width: <length> | auto;
- 参数：<length> 是指用长度值来定义列宽，不允许负值；auto 是指根据列数自动分配宽度
// 浏览器会根据提供的column-width属性，先计算column-count(列数),然后再智能调整column-width的值。
.test {
width: 600px;
border: 10px solid #000;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
.test2 {
border: 10px solid #000;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}
column-count属性
- 概念：设置或检索对象的列数
- 语法：column-count: <integer> | auto
- 参数：<integer> 是指列数，不允许负值; auto 是指列宽自动匹配列数
// 当这个容器足够宽的时候，可以认为column-width是无效的。因为会根据column-count智能调整。
.test {
width: 600px;
border: 10px solid #000;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
column-gap属性
- 概念：设置或检索对象的列与列之间的空隙
- 语法：column-gap: <length> | normal;
- 参数：<length> 用长度值来定义空隙，不允许负值; normal: 与字体大小相同
.test3 {
font-size: 48px;
border: 10px solid #000;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
column-rule属性
- 概念：设置或检索对象的列与列之间的边框，复合属性
- 语法：column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
- 参数：设置或检索对象的列与列之间的边框厚度，样式和颜色
- 补充：分开设置(column-rule-width属性，column-rule-style属性，column-rule-color属性)
.test {
font-size: 48px;
border: 10px solid #000;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule: 20px solid #ff0000;
-moz-column-rule: 20px solid #ff0000;
column-rule: 20px solid #ff0000;
}
column-span属性
- 概念：设置或检索对象元素是否横跨所有列
- 语法：column-span: none | all;
- 参数：none 不跨列；all 横跨所有列
// 注意这里控制的是子元素P
.text2 > p:nth-of-type(2) {
-webkit-column-span: none;
-moz-column-span: none;
column-span: none;
}
column-fill属性
- 概念：设置或检索对象所有列的高度是否统一
- 语法：column-fill: auto | balance;
- 参数：auto 列高度自适应内容 | balance 所有列的高度以其中最高的一列统一
// 目前的主流浏览器都不支持此属性
.text {
width: 600px;
font-size: 12px;
border: 10px solid #000;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-rule: 10px solid red;
-moz-column-rule: 10px solid red;
column-rule: 10px solid red;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
column-break-before属性
- 概念：设置或检索对象之前是否换行
- 语法：column-break-before: auto | always | avoid;
- 参数：
auto：即不强迫也不禁止在元素之前断行并产生新列
always：总是在元素之前断行并产生新列
avoid：避免在元素之前断行并产生新列
// 这个属性设置在子元素div上
.text2 > div {
color: red;
-webkit-column-break-before: always;
-moz-column-break-before: always;
column-break-before: always;
}
column-break-after属性
- 概念：设置或检索对象之后是否断行
- 语法：column-break-after: auto | always | avoid;
- 参数：
auto：即不强迫也不禁止在元素之后断行并产生新列
always：总是在元素之后断行并产生新列
avoid：避免在元素之后断行并产生新列
// 这个属性设置在子元素div上
.text2 > div {
color: red;
-webkit-column-break-after: always;
-moz-column-break-after: always;
column-break-after: always;
}
column-break-inside属性
- 概念：设置或检索对象内部是否断行
- 语法：column-break-inside: auto | avoid
- 参数：
auto：即不强迫也不禁止在元素内部断行并产生新列
avoid：避免在元素内部断行并产生新列
// 这个属性设置在子元素div上
.text > div {
color: red;
-webkit-column-break-inside: auto;
-moz-column-break-inside: auto;
column-break-inside: auto;
}
