由于围绕CSS Grid和Flexbox技术的所有宣传，经常忽略另一种布局方法。 在本文中，我想考虑一个多列布局-通常简称为“ Multicol”或“ CSS Columns”。 您将了解适合的任务以及使用时应考虑的细微差别。
什么是多列？
多列的主要思想是，您可以将其中的一部分片段放入报纸中的几列中。 您可以使用一个或两个属性来执行此操作。
column-count属性设置您要将内容拆分成的列数。
column-width属性设置理想的宽度，允许浏览器确定可以容纳多少列。
变成多列容器的块中的哪些元素无关紧要，所有元素都保留在常规流中，但分为几列。 这使得CSS列与我们今天在浏览器中使用的其他布局方法不同。 例如，Flexbox和Grid接受容器的子元素，然后这些元素参与flex或grid布局。 对于CSS列，您仍然有常规的流，但列内部没有。
在下面的示例中，我使用
column-width使列
column-width至少为14em。 CSS列确定容器中可容纳多少宽度为14em的列，然后在它们之间分配剩余空间。 除非具有仅放置一列的情况，否则列的宽度至少为14em，在这种情况下，列可能会变窄。 CSS列是我们第一次在CSS中遇到类似行为，创建了默认情况下响应的列。 无需添加媒体表达式并更改不同控制点的列数，而是我们指定最佳宽度，浏览器将使用它。
列样式
无法选择使用CSS列属性创建的列块进行样式设置。 您不能使用JavaScript选择它们，也不能对单个块进行样式化以为其提供背景颜色或自定义填充或边距。 所有扬声器块的尺寸均相同。 您唯一可以做的就是使用
column-rule属性在
column-rule之间添加分隔线，该属性的作用类似于border。 您还可以使用
column-gap属性在
column-gap之间缩进，该属性的默认值为1em，但是您可以将其更改为任何其他有效的长度单位
这是CSS列的基本功能。 您可以使用部分内容并将其分为几列。 内容将填充列，并沿线性方向创建它们。 您可以通过指定与border相同的值来控制列之间的间距并添加分隔线。 到目前为止，一切进展顺利，并且很长时间以来，以上所有功能都在浏览器中得到很好的支持，这使该规范在向后兼容方面非常安全。
CSS列功能具有某些功能，并且在Web中使用列布局时应考虑一些潜在问题。
演讲者范围
有时，您可能需要将一些内容分成几列，然后将一个元素跨过，覆盖几列。 这可以通过将
column-span属性应用于列容器的后代来实现。
在下面的示例中，我使
<blockquote>元素跨列。 请注意，当您执行此操作时，会将内容拆分为该元素上方的一组字段，然后在其下方开始一组新的列。 内容不会跳过封闭元素。
当前，默认情况下， column-span属性在除Firefox之外的所有浏览器中均有效。 在其中，它仍在开发中并隐藏在标志的后面。请记住，在当前规范中，
column-span属性的值只能是
all或
none 。 您不能只覆盖某些列，但可以通过将列布局与其他排版方法结合使用来获得这样的结果。 在下面的示例中，我有一个包含两列的Grid容器。 左列为2fr宽，右列为1fr宽。 在左列中，我将文章包装在一个列容器中，该容器包含两个也包含一个封闭元素的列。
右侧是第二个“网格”列中的内容。 通过使用我们可用的不同类型的布局方法，我们可以准确地确定哪种方法最适合特定的情况-不要害怕将它们结合起来。
内容传输控制
如果列容器包含标题，则您可能希望避免它们中断并将标题或标题下的文本的一部分转移到下一列的情况。 如果您有带字幕的图像，则图像和字幕都保持完整，且各列之间没有间隙会更好。 特别是在这种情况下，CSS具有用于控制内容传输的属性。
通过将内容划分为列，您可以执行所谓的分段。 如果在页面之间共享内容，例如在创建打印样式时，也是如此。 因此，这些列比Web上的其他标记方法更靠近分页媒体。 因此，多年来，控制内容包装器的方法是使用CSS 2.1中的
page-break- properties。
page-break-beforepage-break-afterpage-break-inside
CSS Fragmentation规范后来定义了为任何分段上下文设计的属性；该规范包括Paged Media，CSS Columns和deferred Regions规范的详细信息； 区域还会使连续的内容碎片化。 通过使这些属性通用，可以将它们应用于将来的任何片段上下文，就像Flexbox的对齐属性已移至“框对齐”规范中一样，以便可以在“网格”和“块”布局中使用。
break-beforebreak-afterbreak-inside
例如，我在
<figure>元素中使用了
bread-inside: avoid属性，以防止标题与图像本身分离。 支持此属性的浏览器必须使元素保持完整，即使列看起来不均匀。
不幸的是，在CSS Columns中对这些属性的支持是混合的。 但是，即使在有支持的情况下，也应将它们视为建议，因为有必要发出这么多请求来控制传输，而实际上浏览器无法在任何地方进行传输。 在这种情况下，规范定义了优先级，但是对您而言，仅控制最重要的情况可能更为有用。
网络上的列问题
我们之所以无法在网络上看到大量使用CSS列的原因之一，是因为它会导致读者与页面的互动发生变化，从而迫使其横向滚动而不是上下滚动。 同意，这不是很方便。
例如，如果使用视区vh的视场单位固定容器的高度，并且内容过多，则在行方向上会发生溢出，并且会得到水平滚动。
这个问题使我们在网络上使用CSS列时必须非常谨慎地处理发布到其上的内容量。
阻止溢出扬声器
对于“ CSS列”规范的第2级，我们正在考虑如何启用通过溢出列（当前会导致水平滚动出现）而不是沿块方向增长的方法。
这意味着您可以拥有一个具有固定高度的列容器，一旦内容创建填充该容器的列，就会在下面创建一组新的列。 这与上面的带有spanning元素的示例有些相似，但是，不是由spanning导致新的列块，而是由具有块尺寸约束的容器引起的溢出。
此功能将使列在Web上更加有用。 尽管我们仍然相距甚远，但是您仍然可以
在CSS工作组存储库中对该问题进行跟进。 如果您有使用此功能的其他示例，请写下它们，这对开发新功能确实有帮助。
如今，多列有何用处？
在当前规范中，不建议在不考虑可能的滚动问题的情况下将所有内容分为几列。 但是，在某些情况下扬声器是完美的。 寻找设计模式时，有许多示例值得考虑。
减少小界面或文本元素
多列项目在需要占用较少空间的少量项目的地方都是有用的。 例如，一个简单的复选框列表或一个名称列表。 通常，在这种情况下，访问者不会读到最后一列，此后他会返回到下一列的开始，而是在内容中查找用于单击的复选框或用于访问的链接。 即使出现滚动外观的情况，也不应该成为问题。
您可以在
DonarMuseum网站上看到类似使用扬声器的
示例
先知少量内容
在某些情况下，开发网站时，我们会事先知道某些内容的数量会很小并且适合大多数屏幕，而不会引起不必要的滚动。 我使用
Notist演示页面上的列作为介绍。
安迪·克拉克（Andy Clarke）为
Equfund设计了一个很好的例子
为避免在很小的屏幕上滚动，请记住，可以使用媒体表达式来检查视口的高度和宽度。 仅在最小
min-height大于内容最小
min-height控制点上打开列可以节省使用非常小的设备的用户。
砌体内容展示
在您要以砌体样式显示内容的情况下，列布局效果很好的另一个示例。 目前，列是唯一一种可以使用不同高度的元素创建这种类型的布局的布局方法。 CSS网格不会缩进或拉伸元素以严格匹配二维网格。
Veerle Pieters在她
鼓舞人心的页面上有一个很好的示例，将列用于这些目的。
网格和Flexbox后备
column-属性也可以用作网格或弹性布局的后备。 如果为容器指定列属性之一，然后使用
display: flex或
display: grid将此容器转换为Flex或Grid布局
display: grid任何列行为都将被取消。 例如，如果您拥有使用CSS网格的卡布局，并且可以在多列中读取，则可以将这些列用作简单的备用。 不支持CSS Grid的浏览器将显示列，支持CSS Grid的浏览器将显示Grid。
不要忘记多列！
通常，在回答有关在Grid或Flexbox之间进行选择的问题时，我建议改为使用多列。 您可能无法在每个站点上使用它们，但是当您遇到合适的任务时，它们会变得非常有用。 MDN具有有用的
CSS列资源和相关的
碎片属性 。
如果您在项目中使用列，也许您应该在注释中提及此内容，以分享使用此功能的其他方式