columns 属性
columns 属性是一个简写属性
column-count 属性: 定义列的数量
column-width 属性: 定义列的宽度
列的数量
column-count 属性用于设置列的数量或者允许的最大列数
auto: 默认值, 用于表示列的数量由其他CSS属性决定
number: 必须是正整数, 用于表示定义列的数量
列的宽度
column-width 属性用于设置列的宽度或者列的最小宽度
auto: 默认值, 用于表示列的宽度由其他 CSS 属性决定
length: 必须是正整数, 用于表示定义列的宽度
列的间距
column-gap 属性用于设置列与列之间的间距, 该属性需要为多列显示时的元素设置
normal: 用于表示使用浏览器定义列的默认间距, 默认值为 1em
length: 必须是正整数, 用于表示定义列之间的间距
列的边框
column-rule 属性用于定义列与列之间的边框, 其中包括边框宽度, 边框颜色以及边框样式
column-rule-width 属性: 用于表示列与列之间的边框宽度
column=rule-color 属性: 用于表示列与列之间的边框颜色
column=rule-style 属性: 用于表示列与列之间的边框样式
横跨多列
column-span 属性用于定义一个列元素是否跨列
none: 用于表示元素不跨列
all: 用于表示元素跨所有列
列的填充
column-fill 属性定义列的宽度是由内容决定, 还是统一高度
auto: 默认值, 用于表示列的高度由内容决定
balance: 用于表示列的高度根据内容最多的一列高度为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3的多列布局</title>
<style>
#parent,
#parent2,
#parent3 {
/* column-count: 4;
column-width: 300px; */
columns: 4 300px;
column-gap: 20px;
/* column-rule-width: 5px;
column-rule-color: tomato;
column-rule-style: double; */
column-rule: 5px tomato double;
}
.col1,
.col2,
.col3,
.col4,
.col5 {
height: 300px;
}
.col1,
.col6 {
background-color: hotpink;
}
.col2,
.col7 {
background-color: lightblue;
}
.col3.col8 {
background-color: green;
}
.col4,
.col9 {
background-color: yellow;
}
.col5 {
background-color: tomato;
column-span: all;
}
.col6,
.col7,
.col8,
.col9 {
column-fill: balance;
}
</style>
</head>
<body>
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
</div>
<div id="parent2">
<div class="col5"></div>
</div>
<div id="parent3">
<div class="col6">多列布局</div>
<div class="col7">多列布局
</div>
<div class="col8">多列布局</div>
<div class="col9">多列布局</div>
</div>
</body>
</html>