本文链接：https://blog.csdn.net/weixin_44754351/article/details/107661817

一.多列布局——Columns

语法：
```
columns：<column-width> || <column-count>
```
多列布局columns属性参数主要就两个属性参数：列宽和列数。

举例：要显示2栏显示，每栏宽度为200px，代码为：
```
columns: 200px 2;
```
到目前为止大部分主流浏览器都对其支持：不过还是需要添加各浏览器前缀-webkit，-moz，-o,-ms。

示例：写一个三栏布局，每栏宽度为150px。

<div class="columns">
  <h2>我要分列显示</h2>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
</div>

.columns {
  width: 500px;
  padding: 5px;
  border: 1px solid green;
  margin: 20px auto; 
  -webkit-columns: 150px 3;
  -moz-columns: 150px 3;
  -o-columns:150px 3;
  -ms-columns: 200px 3;
  columns: 150px 3;
}

在这里插入图片描述

二.多列布局——column-width

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示；
```
column-width: auto | <length>
```

三.多列布局——column-count

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：
```
column-count：auto | <integer>
```
例如：将列分成四列显示，代码如下：
```
column-count:4;
```

四.多列布局——column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：
```
column-gap: normal || <length>
```
例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：
```
column-count: 3;
column-gap: 2em;
```

五.多列布局——column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
```
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
```
例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：
```
column-rule: 2px dotted green;
```

六.多列布局——column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。
```
column-span: none | all
```
例如：将第一个标题跨越所有列，代码：
```
column-span:all;
```