多列总结

多列

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