多列总结

多列

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 同理