什么时候使用 CSS 列? Plato区块链数据智能。垂直搜索。人工智能。

什么时候使用 CSS 列?

这不是修辞:我真的很想为 CSS 多列布局找到很好的用例。

答案似乎很简单。 当您想将任何内容分成列时使用列,对吗? 通常,您会在展示 CSS 多列布局如何工作的文章中找到这样的示例,包括我们自己的 历书:

对了。 但这是一个实际的用例吗? 嗯,也许。 如果文字相对简短,那么也许这是一个很好的接触。 这就是我在重新设计我的网站时把它卖给自己的方式 几年前. 今天不是这样,但这是当时的样子:

什么时候使用 CSS 列?

但是一整篇长篇文章分成几列? 我喜欢在报纸上看到它,但对于向下滚动网页以阅读一栏感到犹豫,只能向上滚动以再次阅读。

我想我们可以用它来并排放置两个元素,但 flexbox 更适合这种情况。 另外,一个限制阻止我们选择列来单独调整它们的大小。 列的宽度必须相同。

列对它们有用的一件事是它们是唯一的 CSS 布局方法 片段 内容。 (也就是说,除非我们计算 CSS 区域......无论如何,这些发生了什么?!)所以,如果你想将一个段落分成几列,那么在没有额外的包装器的情况下已经有可能了。

什么时候您可能需要将连续的内容块拆分为列? 我记得当我有一个很大的无序列表时需要这样做。 我喜欢列表可以使内容易于扫描的方式,但是长列表会使页面的一侧看起来超级沉重。 例如,假设我们在字母组中列出了 CSS-Tricks 的所有帖子标签。 多列布局非常适合:

继续尝试调整视口宽度。 定义了三列,但数量将根据可用空间量而变化。 在没有媒体查询工作的情况下,一定会喜欢所有响应式的好处!

我正在为 :left 伪类并达到 columns 因为它是一个很好的方式来分割打印演示的东西。 所以,我想还有另一个用例。 在制作演示时,我意识到可以使用多列布局来创建项目的砖石网格,例如图片库:

但还有什么? 我们是否仅限于短段落、长列表和自由流动的网格?

时间戳记:

更多来自 CSS技巧