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;
}