多列總結

多列

columns

適用於除table外的非替換塊級元素，table cells，inline-block元素

語法：

columns: <'column-width'> <'column-count'>;  
/* column-width 列寬   column-count 列數 */

若是元素設置了多列，同時也設置了寬度，當元素寬度小於columnWidth * columnCount + columnGap時，元素會減小列的個數，以適應元素寬度

.test {
    columns:210px 3;
    width: 500px;
}
/* 500 < 210*3 ,行數設置的是 3 單位了適應元素寬度變爲了2 */

column-gap

設置或檢索列與列之間的間隙。不容許負值。

.test{
    columns:210px 3;
    column-gap: 30px;
}

效果以下：

column-rule

設置或檢索對象的列與列之間的邊框。

語法：

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
/* 與border相似  */

邊框在列間隙的中間，若是邊框寬度大於間隙寬度，那麼邊框會覆蓋內容。

.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
}

效果以下：

column-span

設置或檢索對象元素是否橫跨全部列

取值：

column-span: all;  /* 橫跨全部列 */
column-span: none;  /* 不橫跨 */

.test {
    columns: 210px 3;
    column-gap: 20px;
    column-rule: 30px solid green;
    column-span: all;
    -moz-column-gap: 20px;
    -moz-column-rule: 30px solid green;
    -moz-column-span: all;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 30px solid green;
    -webkit-column-span: all;
}

.test div{
    background-color: yellow;
}

效果以下：

column-fill

設置或檢索全部列的高度是否統一

取值：

column-span: auto;  /* 列高度自適應內容 */
column-span: balance;  /* 全部列的高度以其中最高的一列統一  */

column-break-before

設置或檢索對象以前是否斷行

取值：

column-break-before: auto; /*既不強迫也不由止在元素以前斷行併產生新列*/ 
column-break-before: always; /*老是在元素以前斷行併產生新列*/
column-break-before: avoid; /*避免在元素以前斷行併產生新列 */

.test{
    -moz-column-count:4;
    -moz-column-gap:20px;
    -moz-column-rule:3px solid #090;
    -webkit-column-count:4;
    -webkit-column-gap:20px;
    -webkit-column-rule:3px solid #090;
    column-count:4;
    column-gap:20px;
    column-rule:3px solid #090;
}

.test div{
    -moz-column-break-before:always;
    -webkit-column-break-before:always;
    column-break-before:always;
}

效果以下：

column-break-after

設置或檢索對象以後是否斷行

取值：

column-break-after: auto; /*既不強迫也不由止在元素以後斷行併產生新列 */ 
column-break-after: always; /*老是在元素以後斷行併產生新列*/
column-break-after: avoid; /*避免在元素以後斷行併產生新列*/

與 column-break-before 同理