CSS3多列Multi-column布局

Properties
属性
CSS Version
版本
Inherit From Parent
继承性
Description
简介
columns CSS3 设置或检索对象的列数和每列的宽度。复合属性
column-width CSS3 设置或检索对象每列的宽度
column-count CSS3 设置或检索对象的列数
column-gap CSS3 设置或检索对象的列与列之间的间隙
column-rule CSS3 设置或检索对象的列与列之间的边框。复合属性
column-rule-width CSS3 设置或检索对象的列与列之间的边框厚度。
column-rule-style CSS3 设置或检索对象的列与列之间的边框样式。
column-rule-color CSS3 设置或检索对象的列与列之间的边框颜色。
column-span CSS3 设置或检索对象元素是否横跨所有列。
column-fill CSS3 设置或检索对象所有列的高度是否统一。
column-break-before CSS3 设置或检索对象之前是否断行。
column-break-after CSS3 设置或检索对象之前是否断行。
column-break-inside CSS3 设置或检索对象内部是否断行。

columns

设置或检索对象的列数和每列的宽度。复合属性

columns:[ column-width ] || [ column-count ]

.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

column-width

 设置或检索对象每列的宽度

.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}
.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}
.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}

column-count

设置或检索对象的列数

column-count:<integer> | auto

  • <integer>:用整数值来定义列数。不允许负值
  • auto:根据column-width自定分配宽度

column-gap

设置或检索对象的列与列之间的间隙

column-gap:<length> | normal

  • <length>:用长度值来定义列与列之间的间隙。不允许负值
  • normal:与font-size大小相同。假设该对象的font-size为16px,则normal值为16px,类推。

 column-rule

设置或检索对象的列与列之间的边框。复合属性。

column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

  • [ column-rule-width ]:设置或检索对象的列与列之间的边框厚度。
  • [ column-rule-style ]:设置或检索对象的列与列之间的边框样式。
  • [ column-rule-color ]:设置或检索对象的列与列之间的边框颜色。

.test{
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:10px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:10px solid #090;
column-count:3;
column-gap:20px;
column-rule:10px solid #090;
}

设置或检索对象的列与列之间的边框厚度。

column-rule-width:<length> | thin | medium | thick

  • <length>:用长度值来定义边框的厚度。不允许负值
  • medium:定义默认厚度的边框。
  • thin:定义比默认厚度细的边框。
  • thick:定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

column-rule-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

  • none:无轮廓。column-rule-color与column-rule-width将被忽略
  • hidden:隐藏边框。
  • dotted:点状轮廓。
  • dashed:虚线轮廓。
  • solid:实线轮廓
  • double:双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值
  • groove:3D凹槽轮廓。
  • ridge:3D凸槽轮廓。
  • inset:3D凹边轮廓。
  • outset:3D凸边轮廓。

column-rule-color:<color>

设置或检索对象元素是否横跨所有列。

column-span:none | all

  • none:不跨列
  • all:横跨所有列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:3;
column-gap:20px;
column-rule:3px solid #090;
}
.test p{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}

效果:

column-span

设置或检索对象所有列的高度是否统一。

column-fill:auto | balance

  • auto:列高度自适应内容
  • balance:所有列的高度以其中最高的一列统一

.test{
width:600px;
border:10px solid #000;
-moz-column-count:2;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-moz-column-fill:balance;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
-webkit-column-fill:balance;
column-count:2;
column-gap:20px;
column-rule:3px solid #090;
column-fill:balance;
}

效果图:

column-fill

设置或检索对象之前是否断行。

column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

  • auto:既不强迫也不禁止在元素之前断行并产生新列
  • always:总是在元素之前断行并产生新列
  • avoid:避免在元素之前断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-before:always;
-webkit-column-break-before:always;
column-break-before:always;
}

效果图:

column-break-before

设置或检索对象之后是否断行。

column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

  • auto:既不强迫也不禁止在元素之后断行并产生新列
  • always:总是在元素之后断行并产生新列
  • avoid:避免在元素之后断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-after:always;
-webkit-column-break-after:always;
column-break-after:always;
}

效果图:

column-break-after

设置或检索对象内部是否断行。

column-break-inside:auto | avoid | avoid-page | avoid-column

  • auto:既不强迫也不禁止在元素内部断行并产生新列
  • avoid:避免在元素内部断行并产生新列

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流