columns多列布局常用属性

columns是css3的属性，用于多列布局，按照列来布局，如下图所示（随手画的，比较丑陋，意思到位就行了）

下面先来看一下浏览器的支持情况，再来研究其用法和属性

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

属性：

• column-width：<length> | auto 设置对象的宽度；使用像素表示。auto：根据 <' column-count '> 自定分配宽度
•  column-count：<integer> | auto 用来定义对象中的列数，使用数字 1-10表示。auto：根据 <' column-width '> 自定分配宽度
•  columns: <'column-width'> || <'column-count'>设置对象的列数和每列的宽度。复合属性。
• column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。
• column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>设置对象的列与列之间的边框。复合属性
• column-fill：auto | balance设置对象所有列的高度是否统一; auto： 列高度自适应内容;balance： 所有列的高度以其中最高的一列统一
• column-span：none | all 设置或检索对象元素是否横跨所有列。
• column-break-inside：auto | avoid | avoid-page | avoid-column  （avoid避免在元素内部断行并产生新列）