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相反) |


相关推荐
匀泪7 分钟前
云原生(Kubernetes存储)
前端·chrome
kyriewen34 分钟前
你等的Babel编译,够喝三杯咖啡了——用Rust重写的SWC,只需眨个眼
前端·javascript·rust
搬砖码42 分钟前
同源多标签页通信 4 种方案,从入门到生产环境
前端·面试
张元清1 小时前
SSR 状态管理陷阱:defineStore vs defineContextStore
前端·javascript·面试
donecoding1 小时前
nrm、corepack、npm registry 三者的爱恨情仇
前端·node.js·前端工程化
小gaigagi1 小时前
从吉客云·奇门到MySQL的完整数据流
前端
悟空瞎说1 小时前
用 Rust 开发 QML 桌面应用(第二篇)—— 日志系统完整搭建
前端
LIO1 小时前
前端开发之Git 代码仓库管理详细教程
前端·git
软件开发技术深度爱好者1 小时前
前端网页开发三剑客快速入门
前端
openKaka_2 小时前
为什么 React 18 之后使用 createRoot,而不是 ReactDOM.render
前端·javascript·react.js