Multi-column 多栏布局的简单使用

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

Multi-column

假设我们有这样的 html 结构，一个 <article/> 元素下有 3 个 p 元素，分别显示了一大段文字：

<main>
  <article>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda, sapiente?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, cum. 
    </p>
  </article>
</main>

在正常情况下，这三段是按顺序从上到下排列的

我们可以给父容器设置一个 column-count 属性，从而给父容器开启多栏布局，它的值是一个数字，用来规定显示多少列，这里给它设置为 3

article {
  column-count: 3;
  /*
  	column-count可以简写为columns
  	即columns: 3;
  */
}

或者直接用 column-width 设置每列固定的宽度，浏览器会自动根据空间来决定显示多少列：

article {
  column-width: 100px;
}

我们可以使用 column-gap 设置列边距

article {
  column-count: 3;
  /* 设置多栏的行间距为50px */
  column-gap: 50px;
}

可以使用 column-rule 设置分隔线样式，属性值和 border 一样

article {
  column-count: 3;
  column-rule: 1px solid #fff;
}

multi-column 默认是平均分配内容到各列的，每列的高度都是相同

可以使用 column-fill 来改变它的分布方式

可选值	说明
balance	平均分布，平均分配内容到各列（缺省值）
auto	填满一列之后再开启新的一列

article {
  height: 100px;
  column-count: 3;
  column-fill: auto;
}

最后，我们可以使用column-span将元素进行跨栏显示

h2 {
  /* 横跨整个横栏 */
  column-span: all;
  text-align: center;
}

总结：

属性	说明
column-count	用于直接规定列数
columns	column-count的简写形式
column-width	规定每列宽度，数量自适应
column-gap	设置列间距
column-rule	设置列的分隔线
column-fill	设置列的分布
column-span	设置跨列