列 | CSS-Tricks 中文

CSS 年鉴 → 属性 → C → columns

Katy DeCorah 于 2022 年 6 月 13 日

只需几条 CSS 规则，您就可以创建一个具有网络灵活性的打印风格布局。这就像拿着一份报纸，但随着报纸变小，列会自动调整和平衡，使内容自然流动。

.intro {
  columns: 300px 2;
}

columns 属性将接受 column-count、column-width 或两个属性。

columns:  || ;

建议使用 column-count 和 column-width 来创建一个灵活的多列布局。 column-count 将充当最大列数，而 column-width 将指示每列的最小宽度。通过将这些属性组合在一起，多列布局将自动分解为窄浏览器宽度下的单列，无需使用媒体查询或其他规则。

多列布局在块级元素（包括列表）上效果很好，可以创建灵活的导航。

为了进一步微调您的多列布局，请在特定元素上使用 break-inside 以防止它们卡在列之间。

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
10+	全部	9+	50+	全部	11.5+

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
全部	全部	全部	全部	全部

Rima

# 2014 年 9 月 16 日

看起来很棒，您有在野外使用它的示例吗？

Lewis

评论永久链接# 2016 年 12 月 14 日

我知道我来的晚了些，但新的 Codepen Spark 页面在它的网格中使用了它，效果很好！

Pawel

# 2015 年 5 月 21 日

嗨，我很酷。

感谢这些有用的内容，我喜欢它们。
你很酷，兄弟。

Jacan Chaplais

# 2015 年 9 月 27 日

这非常有用，但它能优雅地降级吗？因为 IE9 似乎太新了，不能忽略。

Todd

# 2015 年 10 月 27 日

Jacan - IE9 至少“有点”优雅地忽略了列代码并显示单列。您可以选择忽略它，添加现代化器，或添加一个条件样式表来专门处理 9 及更低版本。

Jacan Chaplais

评论永久链接# 2015 年 10 月 27 日

谢谢，Todd。
我最终在我的一个项目中使用了它。效果非常好，我并不介意这个网站变成单列。尽管如此，IE 仍然像往常一样，很糟糕。

谢谢，Todd。
我最终在我的一个项目中使用了它。效果非常好，我并不介意这个网站变成单列。尽管如此，IE 仍然像往常一样，很糟糕。

# 2015 年 10 月 29 日

确实。即使对于 IE 10 和 11，我在 css 中也使用了 display: table，它阻止了多列在浏览器缩小时下降到一个。我最终添加了媒体查询，在特定的断点处重置列数。我当然不喜欢这样做。

muphet

# 2015 年 11 月 27 日

我希望你真的可以垂直对齐列内的项目，使用类似 column-margin: auto 0; 的代码。

TheFPVdrone.com

# 2016 年 8 月 24 日

谢谢！完美地起作用了

Wojack Pepe

# 2016 年 9 月 9 日

嗨，我也是个酷哥。

好的代码，我现在了解了这个区域的 CSS 规则的所有内容。由于我新获得的知识，列在所有方向上流动。

如果必须流血，我将很乐意为你效劳，朋友。

Henry

# 2016 年 10 月 13 日

非常有用，请继续努力

jehzlau

# 2016 年 11 月 24 日

是否可以使列宽不均匀？例如，如果我使用列数 3，那么我希望第 1 列有 50% 的宽度，第 2 列和第 3 列分别有 25% 的宽度。这可以用 column 属性实现吗？还是我需要使用 bootstrap 或创建自己的网格？

Andre

评论永久链接# 2016 年 12 月 15 日
或者你也可以直接使用 flexbox。
```
.parent {
display:flex;
}
.first-column {
flex-grow: 2;
}
```
干杯

brundonsmith

# 2017 年 1 月 6 日

除了不必编写那么多代码之外，我不完全理解 flexbox 存在的情况下对这个属性的需要。

即

.container {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  justify-content: flex-start;
}
.container > .item {
  min-width: 300px;
}

txdm

评论永久链接# 2017 年 2 月 9 日

Brundon，据我所知，这只有在你为容器定义了特定的高度限制的情况下才会起作用。然后列会显示（如果需要），但当页面变小时它们不会正确重新排列……外层容器会保持其最小宽度，即使它超出屏幕。

CSS 列会始终将其分成定义的列数，并让高度由内容决定。它会适当地重新排列宽度和高度。

Vinod Dangudubiyyapu

# 2018 年 1 月 9 日

Chrome 中的列对齐问题 https://jsfiddle.net/uydovLbx/ 在 FF 和 IE 中运行良好

Pravin

# 2019 年 4 月 12 日

来晚了些……有点困惑。Flexbox、网格和列。是否有任何比较文章？

Geoff Graham

评论永久链接# 2019 年 4 月 12 日

嗨，Pravin！很好的问题。我脑海中没有想到任何文章，但希望我能帮助解释一下并指明一些其他解释。

CSS 列是一种视觉方式，用于将内容从一列流到下一列，由 columns 属性定义的列数决定。因此，如果您要在元素上放置 3 列，那么它的子元素将被分配到这些列中。

Flexbox 可以创建列，但它更侧重于创建灵活的盒子，这些盒子可以垂直或水平运行，并根据 Flexbox 属性填充可用空间。所以，是的，它看起来像列（或行），但实际上是 Flexbox 如何计算每个灵活盒子的大小以填充空间。

网格通过建立轨道线并将元素放置在其中来创建真实的列和行。Chris 最近发布了一个关于网格和 Flexbox 的很好的比较……虽然差异有点细微，但一旦你深入研究，它们就会变得更加清晰。

正如你可能想象的那样，这里还有很多内容，但希望这至少能帮助你了解表面，并指引你走向正确的方向。甚至可能值得写一篇帖子！

# 2020 年 7 月 2 日

嗨，我需要建议，

CSS 列在 Chrome 和 Safari 浏览器中很麻烦。以下是问题。
1. 包含 iframe 嵌入视频的列正在消失（已向 Chrome 团队报告）https://www.codeply.com/p/vVorXVNYX6
2. 上方的跨列获得了下方跨列高度的另一列(https://ibb.co/kq1fWfQ)

相关属性

更多信息

浏览器支持

评论

发表评论 取消回复

发表评论取消回复