初学者的CSS多列布局教程

CSS多列布局入门教程：关键要点

• CSS多列布局模块允许开发者创建响应式多列布局，在各种屏幕尺寸上都能呈现良好的效果。column-count属性指定列数，column-width属性指定各列宽度。两者均可设置为auto或正数，并可使用简写columns属性同时设置。
• column-gap属性指定列间距，column-rule属性是简写形式，允许我们在列之间添加分隔线。column-fill属性决定如何分配内容以填充各列，column-span属性控制元素跨越多列的方式。
• 为了使布局在所有屏幕尺寸上都显示良好，应同时指定column-count和column-width。使用媒体查询可以帮助解决水平滚动或列过长等问题。不支持多列功能的旧版浏览器将优雅地降级为单列布局。

长文本行阅读起来可能比较费力，读者更关注不漏行而不是文本内容本身。使用多列布局可以轻松解决这个问题。多列布局在印刷媒体中非常常见。CSS多列布局模块的功能使我们能够在网站上再现相同的多列效果。

在网页设计中使用多列布局的一个难点在于无法控制文档大小。在本教程中，我将教您如何创建响应式多列布局，使其在各种屏幕尺寸上都能呈现良好的效果。我们将从基础知识开始，然后逐步学习更复杂的概念。

浏览器支持

如果您愿意使用前缀，则多列布局的浏览器支持非常好。根据Can I use网站的统计数据，此功能在全球95.32%的浏览器中受支持。一些浏览器（如IE10 、Edge和Opera Mini）完全支持多列布局。其他浏览器（如Firefox和Chrome）需要前缀。

如果您需要支持旧版浏览器（通常是指IE9及以下版本），可以使用旧的polyfill。当然，如果浏览器不支持多列功能，布局将优雅地降级为单列布局。因此，在这种情况下，polyfill可能不是最佳选择。

CSS多列布局模块具有许多不同的属性。在以下部分中，我将逐一介绍它们。

列数和列宽

column-count属性指定要为元素设置的列数。您可以将其设置为auto或正数。设置为auto时，列数将由column-width属性决定。如果设置为正数，则所有列的宽度相等。

column-width属性指定元素各列的宽度。这并非严格遵守。例如，如果可用空间不足，列可以更窄。此属性也可以设置为auto值或正数。如果设置为auto，宽度将由column-count属性决定。可用空间将平均分配到所有列中。

或者，可以使用简写columns属性同时设置这两个值。columns属性的语法如下：

.example {
  columns:  || 
}

下面显示了此属性的一些使用示例，以及每个示例旁边的解释：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

如您所见，第一个columns定义是第四个的简写，第二个是第三个的简写。基本上，如果整数没有分配任何单位，则将其解析为column-count。

这是一个CodePen演示，用于演示到目前为止讨论的功能

如果您调整窗口大小，您会注意到以下几点：

• column-count属性始终使列数等于您指定的值。唯一变化的是列的宽度。
• column-width属性会根据可用空间自动更改列数。列数的调整方式是使列宽大于指定值。如果可用空间不足，它也可能会将所有列的宽度调整为较小的值。
• columns属性使用column-count值作为允许的最大列数的限制。它以这样的方式调整宽度：column-count永远不会超过计数限制，并且column-width也与指定的宽度非常接近。

列间距和列规则

column-gap属性允许我们指定列之间的空间量。您可以将其设置为normal或长度值。它可以为零，但不能为负。当您将其设置为normal时，它使用浏览器定义的列之间的默认间距。

column-rule属性是一个简写形式，允许我们在列之间添加分隔线。这类似于使用border-left或border-right属性。此属性遵循以下语法：

.example {
  column-rule:  ||  || 
}

对于column-rule-width，您可以将宽度指定为长度（例如3px）或使用关键字（例如thin、medium或thick）。column-rule-style接受dashed、dotted、solid等值。您可以将border-style属性的所有有效值与column-rule-style一起使用，column-rule-color可以是任何有效的颜色值。

这是一个CodePen演示，其中这些属性一起使用

列填充和列跨度

column-fill属性决定如何分配内容以填充各列。此属性可以设置为auto或balance。设置为auto时，列将按顺序填充。使用balance确保内容在所有列之间平均分配。

需要注意的是，如果您为列元素设置固定高度，Firefox会自动平衡内容。但是，其他浏览器会开始按顺序填充列。

column-span属性控制元素跨越多列的方式。它有两个可能的值：all或none。设置为all时，元素将跨越所有列。此属性在Firefox中不受支持。

这是一个CodePen演示，它将一个blockquote元素“跨越”所有列

在Firefox中，blockquote最终位于中间列，这可能是可以接受的回退。

使用多列创建响应式布局

现在您已经了解了不同的属性和可能的值，让我们关注如何保持布局的响应性和用户友好性。

column-count和column-width都有其自身的问题。虽然column-count在较大的设备上可以控制列数，但在较小的设备上布局会中断。类似地，column-width将确保列在较小的设备上不会太窄，但在较大的设备上会导致很多列。

为了确保您的布局在所有屏幕尺寸上都显示良好，您应该同时指定column-count和column-width。这样，您可以控制宽度和列数。但是，您可能仍然需要修复一些问题，我们将在接下来讨论。

修复水平滚动

如果您为列指定固定高度，则缩小视口将导致出现水平滚动条。由于内容无法垂直扩展，它将水平增长。要解决此问题，您可以调整浏览器大小以了解水平滚动条首次出现时的宽度。然后，您可以使用媒体查询将列的高度在该宽度以下设置为auto。以下是执行此操作的代码：

.example {
  columns:  || 
}

此CodePen演示显示了问题和可能的解决方案

调整窗口大小以查看两个示例的响应方式。

修复过长的列

如果您的列太长，用户将不得不不断上下滚动以阅读所有内容，这会很烦人。当列的高度大于视口高度本身时，最好去除多列。这可以使用媒体查询再次实现：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

在这种情况下，我仅在视口宽度允许用户不再需要上下滚动时才使用多列。

查看具有多列和媒体查询的演示

结论

我希望本CSS多列布局模块入门教程使您熟悉此功能。这些属性可以很好地添加到您的响应式设计工具箱中，如果您仍然需要支持旧版浏览器，多列通常会优雅地降级为单列。

CSS多列布局常见问题解答

如何在CSS中创建多列布局？

在CSS中创建多列布局非常简单。您可以使用column-count属性指定布局中所需的列数。例如，如果您想要三列，您可以编写：

.example {
  columns:  || 
}

在此示例中，.container是您要分成列的元素的类。column-count属性将自动将元素的内容分成指定的列数。

如何在CSS中控制列之间的间距？

column-gap属性允许您控制列之间的空间。您为此属性设置的值将是间隙的宽度。例如，如果您希望列之间有20px的间隙，您可以编写：

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

我可以在CSS中创建不同宽度的列吗？

不幸的是，CSS多列布局模块不支持不同宽度的列。使用column-count属性创建的所有列都将具有相同的宽度。但是，您可以使用其他CSS技术（如Flexbox或Grid）创建不同宽度的列。

如何在CSS中控制列宽？

您可以使用column-width属性控制列宽。此属性指定列的最佳宽度，但浏览器如有必要会调整宽度以适应内容。例如，要将列宽设置为200px，您可以编写：

.example {
  column-rule:  ||  || 
}

如何在CSS中创建列规则？

column-rule属性允许您在列之间创建规则或线条。您可以指定规则的宽度、样式和颜色。例如，要创建1px实心黑色规则，您可以编写：

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

如何在CSS中控制列中断？

break-inside属性允许您控制列中断。您可以将此属性设置为avoid以防止元素内出现中断。例如：

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

我可以将多列布局与响应式设计一起使用吗？

是的，您可以将多列布局与响应式设计一起使用。您可以使用媒体查询根据视口宽度调整列数。例如，您可能希望在小屏幕上显示一列，在大屏幕上显示三列。

如何在CSS中填充列？

默认情况下，列按顺序填充。这意味着首先填充第一列，然后是第二列，依此类推。但是，您可以使用column-fill属性更改此行为。如果将此属性设置为balance，浏览器将尝试均匀填充列。

如何跨越列？

column-span属性允许元素跨越多列。您可以将此属性设置为all以使元素跨越所有列。例如：

.container {
  column-count: 3;
}

CSS多列布局是否存在任何浏览器兼容性问题？

大多数现代浏览器都支持CSS多列布局，但实现方式可能存在一些差异。最好在不同的浏览器中测试您的布局，以确保其按预期工作。您还可以使用Can I Use等工具来检查不同CSS属性的浏览器支持情况。

以上是初学者的CSS多列布局教程的详细内容。更多信息请关注PHP中文网其他相关文章！