此文借鉴于https://www.w3.org/TR/2017/WD-css-multicol-1-20171005/#the-multi-column-model
column-width属性能够设置一个容器中的内容的列宽,当内容超出列宽后,超出的内容会流向下一列中,列数取决于内容的多少和窗口的大小这两个因素,使用方法如下:
<style>
#container{
column-width:100px;
background:pink;
font-size:22px;
}
</style>
<body>
<div id="container">
container容器的内容超过设置的宽度100px后就会自动扩展为两行 并且第二行的宽度也超过100px后将会产生一个间距,在右侧自动产生新的一列,知道这两行全部被占满后才会扩展出第三行,以此类推。
</div>
</body>
效果如下图:
column-count属性可以设置固定列数,列宽将取决于可用的宽度,使用方法如下:
<style>
#container{
column-count: 2;
}
效果如下图:
也可以使用columns属性同时设置列数和列宽,当colnums属性值为数字时表示列数,属性值为长度单位时表示列宽。同时设置时会优先显示列数而忽略列宽。代码如下:
<style>
#container{
columns: 2 100px;
}
column-gap属性用来设置列间距
column-rule属性类似于border属性,用来填充间距样式
使用规则如下:
<style>
#container{
column-gap: 10px;
column-rule: 1px solid black;
}
效果如下图所示:
column-rule如同border一样是一种简称,可以扩展为如下属性:
column-rule-width:1px;
column-rule-color:black;
column-rule-style:solid;
column-span属性表示一个元素可以跨越多少列(none || all),如果设置为all,则当前元素会占满整个容器宽度。
使用规则如下:
<style>
#container {
width: 400px;
columns: 4;
background: #ffde94;
font-size: 23px;
column-rule: 3px solid red;
column-gap: 10px;
}
h2 {
column-span: all;
background: purple;
}
</style>
<body>
<div id='container'>
内容内容内容内容内容内容内容内容内容内容内容内容内容
<h2>内容a内容a内容a内容a内容a</h2>
<h6>内容b内容b内容b内容b内容b</h6>
内容c内容c内容c内容c内容c内容c内容c
</div>
</body>
效果如下图所示:
但当为容器设置固定高度时,高度小于22px时,高度超过22px的文本会被隐藏,而设置为column-span: all的元素依然全部显示,未被隐藏。
代码如下:
<style>
#container {
width: 400px;
height: 21px;
columns: 4;
background: #ffde94;
font-size: 23px;
column-rule: 3px solid red;
column-gap: 10px;
}
h2 {
column-span: all;
background: purple;
}
</style>
效果如下:
关于多列布局的10种属性的用法:
属性 | 可用的值 | 默认值 | 适用 |
---|---|---|---|
column-width | auto / 数字 | auto | 块级包含框(除table) |
column-count | auto / 长度值 | auto | 块级包含框(除table) |
columns | column-width / column-width | ||
column-gap | 长度值(百分比) / normal | normal | 多列元素 |
column-rule | column-rule-width /(&) column-rule-style /(&) column-rule-color | ||
column-rule-width | 类似于border-width | medium | 多列元素 |
column-rule-style | 类似于border-style | none | 多列元素 |
column-rule-color | 类似于border-color | 当前颜色 | 多列元素 |
column-fill | auto / balance / balance-all | balance | 多列元素 |
column-span | none / auto | none | 在流中的块级元素 |