Columns —— CSS多栏布局-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现多栏布局是非常常见的需求，而利用CSS实现多栏布局则是一种比较高效和灵活的方式。本文将介绍CSS多栏布局的基础知识、使用技巧以及示例代码。

基础知识

column-count 与 column-width

实现多栏布局的基础是要确定多少列和每列的宽度。CSS提供了两个属性来帮助我们完成这个任务：column-count 和 column-width。

column-count 表示列数，可以设置一个正整数值来指定列数。如下所示：

div {
  column-count: 3;
}

上述代码表示将一个 div 元素划分为3列。

如果你不想固定列数，而是希望每列都有相同的宽度，则可以使用 column-width 属性。如下所示：

div {
  column-width: 200px;
}

上述代码表示将一个 div 元素划分为若干列，每列宽度为200像素。

column-gap

除了确定列数和每列宽度，我们还需要考虑列之间的间距。CSS提供了 column-gap 属性来设置列与列之间的间距，如下所示：

div {
  column-count: 3;
  column-gap: 20px;
}

上述代码表示将一个 div 元素划分为3列，每列之间的间距为20像素。

column-rule

如果你需要在多栏布局中为每一列添加边框或其他分割线，可以使用 column-rule 属性。如下所示：

div {
  column-count: 3;
  column-rule: 1px solid #ccc;
}

上述代码表示将一个 div 元素划分为3列，并为每一列添加了1像素宽、灰色实线边框。

使用技巧

多层嵌套

CSS多栏布局可以用于实现复杂的布局，例如多层嵌套。如下所示：

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

-- -------------------- ---- -------
------ -
  ------------- --
  ----------- -----
-

------ -
  ------------- --
  ----------- -----
-展开代码

上述代码表示在一个包含3列的父元素中，添加一个包含2列的子元素。这样就可以实现更加复杂的布局。

强制换列

有时候我们想要强制某些元素在新的一列开始，可以使用 break-before 和 break-after 属性。如下所示：

div:nth-child(3n+1) {
  break-before: always;
}

上述代码表示将每三个 div 元素中的第一个元素强制换到新的一列。

自适应宽度

有时候我们希望多栏布局中的列数能够自适应，例如在不同分辨率下显示不同的列数。这时候可以使用CSS3中的 @media 查询和 column-count 属性结合起来实现。

-- -------------------- ---- -------
------ ----------- ------ -
  --- -
    ------------- --
  -
-

------ ----------- ------ --- ----------- ------- -
  --- -
    ------------- --
  -
-

------ ----------- ------- -
  --- -
    ------------- --
  -
-展开代码

上述代码表示当屏幕宽度小于等于768像素时，采用单列布局

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/35574

Columns —— CSS多栏布局