2. columns 设置列宽和列数

column-count 内容分列

column-count: number|auto

• number:列的个数

• auto:根据column-with自动适配

html

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些.
</div>

css

.newspaper
{
    /* 分成3列 */
    column-count:3;
}

column-fill 列填充方式

column-fill: balance|auto;

• balance:列长短平衡

• auto:列顺序填充,他们长度可能不同

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    column-fill:balance;
}

column-gap 列之间的差距

column-gap: length|normal

• length:指定的长度

• normal:1em

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔2em */
    column-gap:2em;
}

column-rule 指定列之间的规则：宽度，样式和颜色

column-rule: column-rule-width column-rule-style column-rule-color

• -width:间隔宽度

• -style:间隔样式

• -color:间隔的颜色

html

<div class="demo">
ABCDDD...省略一大段文字
</div>

css

.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔1em */
    column-gap:1em;
    /* 间隔线4px宽,点状.红色 */
    column-rule:4px dotted red;
}

column-rule-color　列之间间隔线颜色

column-rule-style 列之间间隔线样式

column-rule-width 列之间间隔线宽度

值:thin|medium|thick|length;

• thin:细线

• medium:中等

• thick:粗

• length:指定宽度

column-span 指定元素跨级列

column-span:1|all

• 1:跨越1列

• all:跨越所有列

html

<div class="demo">
    <h1>标题标题标题标题标题标题标题标题...</h1>  
ABCDDD...省略一大段文字
</div>

css

.demo h1{
    /* 跨越所有列 */
    column-span:all;
}
.demo{
    /* 分成4列 */
    column-count:4;
    /* 列之间的间隔1em */
    column-gap:1em;
    /* 间隔线4px宽,点状.红色 */
    column-rule:4px dotted red;
}

column-width 列宽度

html

<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>

css

.demo{
    /* 每一列宽度100px */
    column-width:100px;
}

columns 指定列的宽度和数量

columns: column-width column-count;

html

<div class="demo">
ABCDDD...省略一大sssssssss段文字
</div>

css

/* 设置列宽度100px,列数量3 */
.demo{
    columns:100px 3;
}

/* 等价于 */
.demo{
    column-width:100px;
    column-count:3;
}