重新访问CSS多列布局-css教程-PHP中文网

Revisiting CSS Multi-Column Layout

自从我的第一本书《超越CSS

）探索了当时的新闻多柱布局模块以来，已经过去了近二十年。更新的，可自由使用的在线版本，超越CSS的重新访问，提供了当代的观点。我的印刷背景很可能激发了我对此CSS功能的最初热情，从而使柱状内容无需多余标记。尽管在我的工作中使用了持续的使用，但CSS列仍然令人惊讶的是未被充分利用。为什么？

规范差距

多列布局长期以来一直遭受并继续存在重大局限性。正如雷切尔·安德鲁（Rachel Andrew）（现在是规格编辑者）在五年前强调的那样：不可能直接造型。 JavaScript操纵或对背景，填充和边缘的调整不可用；并且所有柱保持均匀尺寸。只有列规则提供样式选项。

这仍然是正确的。选择性样式，例如使用

的交替背景颜色，是不可能的。虽然列规则允许变化（虚线，虚线，固体，凹槽，山脊），但鉴于他们的近乎相似的引入，缺乏

支持令人困惑。这些缺陷存在，但它们并没有完全解释这种有价值工具的广泛忽视。 :nth-column()历史浏览器不一致border-style border-image较旧的浏览器通常会忽略不支持的列属性。但是，多列布局的早期采用与跨浏览器一致性并不是许多开发人员关注的时期。虽然最初的浏览器支持不一致，尤其是关于内容中断，但现代浏览器现在提供了广泛的兼容性。然而，我与之交谈的开发人员之间对CSS列的感知仍然存在。尽管需要改进，但这不应阻碍其当前功能性方面的使用。>

>可读性和滚动问题

多柱布局的缺乏实用性可能不是源于规范缺陷或实施问题，而是源于可用性挑战。雷切尔·安德鲁（Rachel Andrew）正确地指出了由于长期含量过多的垂直滚动而导致可读性差的潜力。毫无疑问，这是一种负面的阅读体验。

仔细考虑至关重要，但这不应该是威慑。真正的罪魁祸首是糟糕的设计选择，例如不适当地将列应用于没有结构元素的大量文本。标题，图像和引号可以有效地跨越列，从而提高可读性。结合容器查询和现代文本尺寸单元，几乎没有理由避免多列布局。

>

快速审查属性和值

>创建列存在两个主要方法：指定column-count或定义column-width，让浏览器确定列计数。我更喜欢column-width，设置一个宽度（例如18rem），并让浏览器优化列的数量。

column-gap（沟口）控制列之间的间距，理想情况下，使用单元用于文本大小比例。 rem添加了可自定义厚度和column-rule的视觉分离。这种简单的语法有助于其易用性。 border-style在现代CSS

中增强了相关性在超越CSS

超越CSS的时候，许多现代CSS功能都不存在：

和视口单元，高级选择器，例如

>，容器查询，媒体查询，响应式设计的媒体查询，，，rem，:has()，CSS GRID GRID和FLEXBOX。这些进步增强了多列布局的功能。calc() clamp()

和视口单元，再加上

>和rem，在列内启用响应式文本尺寸。 calc()>允许根据内容创建有条件的列。仅当有足够的容器空间可用时，容器查询才能实现列。与CSS网格或Flexbox集成更具创意的布局。clamp()> :has()实用应用：响应迅速的文章布局

>我的挑战是创建一个灵活的，无媒体的文章布局，以适应屏幕尺寸以及存在/不存在

>。柱状文本可提高可读性，文本大小调整到容器宽度，而不是视口宽度。

html很简单：a<figure></figure>元素，包含标题和段落，以及可选的是

。

<main></main>>多列布局样式用于使用<figure></figure>（40CH），

（100CH）和自动余量：

<main><h1>About Patty</h1>
<p>…</p></main><img  alt="重新访问CSS多列布局" >

登录后复制

flexbox仅在包含一个<main></main>> column-width的情况下应用于max-width>

在

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

登录后复制

>这消除了对媒体查询的需求。文本大小使用容器查询（<section></section>）和<figure></figure>适应响应缩放：

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

登录后复制

结果是一种灵活的布局，可适应屏幕尺寸和内容，并有效地利用多列布局。min-width: min(100%, 30rem)>

解决过去的限制

>许多文章突出显示了多列布局的缺陷，尤其是滚动问题。 column-span属性（对于标题，图像，引号跨度列）会大大减轻此功能，并仔细的内容设计以最大程度地减少滚动。使用

。

对多列布局的更新视角break-after: column;

尽管年龄和过去的局限性，多列布局仍未得到充分利用。尽管存在挑战，但其增强设计的价值和能力仍然存在。现在是时候仔细查看这种功能强大的CSS工具了。

>

以上是重新访问CSS多列布局的详细内容。更多信息请关注PHP中文网其他相关文章！