columns屬性

• 概念：設置或檢索對象的列數(shù)和每列的寬度，復合屬性
• 語法：columns: <'columns-width'> || <'columns-count'>
• 參數(shù)：<'columns-width'> 是指每列的寬度粥惧；<'columns-count'>是指列數(shù)

// 當column-width和column-count都存在的時候突雪，會優(yōu)先考慮column-count涡贱。
// 優(yōu)先的意思是指：能放下n列，就放督函。不能放下n列，就調整列數(shù)和寬度锋叨。
// 當div的width可以容下column-count列的時候宛篇，就放column-count列叫倍。然后智能調整column-width。
// 當div的width無法容下column-count列的時候听诸，就自動計算并調整列數(shù)（現(xiàn)有column-width可以放多少列）蚕泽。然后智能調整column-width。

// 當只有column-width的時候派任，會根據(jù)這個列寬計算能放多少列璧南，然后再調整列寬
// 當只有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;
• 參數(shù)：<length> 是指用長度值來定義列寬皿伺，不允許負值盒粮；auto 是指根據(jù)列數(shù)自動分配寬度

// 瀏覽器會根據(jù)提供的column-width屬性丹皱，先計算column-count(列數(shù)),然后再智能調整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屬性

• 概念：設置或檢索對象的列數(shù)
• 語法：column-count: <integer> | auto
• 參數(shù)：<integer> 是指列數(shù)讼油，不允許負值; auto 是指列寬自動匹配列數(shù)

// 當這個容器足夠寬的時候呢簸，可以認為column-width是無效的。因為會根據(jù)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;
• 參數(shù)：<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'>
• 參數(shù)：設置或檢索對象的列與列之間的邊框厚度扎唾，樣式和顏色
• 補充：分開設置(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;
• 參數(shù)：none 不跨列倍阐；all 橫跨所有列

// 注意這里控制的是子元素P
.text2 > p:nth-of-type(2) {
    -webkit-column-span: none;
       -moz-column-span: none;
            column-span: none;
}

column-fill屬性

• 概念：設置或檢索對象所有列的高度是否統(tǒng)一
• 語法：column-fill: auto | balance;
• 參數(shù)：auto 列高度自適應內容 | balance 所有列的高度以其中最高的一列統(tǒng)一

// 目前的主流瀏覽器都不支持此屬性
.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;
• 參數(shù)：
  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;
• 參數(shù)：
  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
• 參數(shù)：
  auto：即不強迫也不禁止在元素內部斷行并產生新列
  avoid：避免在元素內部斷行并產生新列

// 這個屬性設置在子元素div上
.text > div {
    color: red;
    -webkit-column-break-inside: auto;
       -moz-column-break-inside: auto;
            column-break-inside: auto;
}