CSS新手入门笔记整理：CSS多列布局

列数：column-count

语法

column-count: 取值;

属性值	说明
auto	列数由column-width属性决定（默认值）
n（正整数）	自动划分为n列

---

列宽：column-width

语法

column-width: 取值;

属性值	说明
auto	列数由column-count属性决定（默认值）
长度值	单位可以为px、em和百分比等

body会自动根据容器宽度、每列宽度、内容多少这三者来计算列数。

---

列间距：column-gap

语法

column-gap: 取值;

属性值	说明
normal	浏览器默认长度值
长度值	单位可以为px、em和百分比等

---

分隔线：column-rule

语法

column-rule: width style color;

• column-rule-width：定义分隔线的宽度。
• column-rule-style：定义分隔线的样式。
• column-rule-color：定义分隔线的颜色。

---

跨列：column-span

语法

column-span: 取值;

属性值	说明
none	不跨列
all	跨所有列（跟none相反）

---