Tailwind CSS - 列

使用 Tailwind CSS 创建多列布局

Tailwind 的 columns 工具类允许你控制内容在多列中的流动，类似于报纸或杂志的布局。这是 CSS 多列布局模块的一部分，非常适合将长篇文本块或列表流式排布成更紧凑、更易读的格式。

区分 Columns 与 Grid/Flexbox

理解 CSS Columns 与 CSS Grid 或 Flexbox 的区别至关重要。Grid 和 Flexbox 用于在容器中布局项。CSS Columns 用于将单个内容块（例如长段落）流式排布到多列中。

列工具类

你可以通过两种方式定义列：按固定数量或按最佳列宽。当你设置宽度时，浏览器将自动创建尽可能多的符合该宽度的列。

类	CSS 属性	描述
`columns-1` to `columns-12`	`columns: {count};`	创建特定数量的列。
`columns-xs` to `columns-7xl`	`columns: {width};`	创建最佳宽度的列。
`columns-auto`	`columns: auto;`	浏览器默认行为。
`columns-[15rem]`	`columns: 15rem;`	使用任意值进行精确宽度控制。

示例 1：响应式报纸布局

此示例展示了如何格式化一篇长文章。在小屏幕上，它保持单列以确保可读性。在中等屏幕及以上尺寸，文本会流式排布成两列或三列，更好地利用可用的水平空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Columns Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow">
    <h1 class="text-3xl font-bold mb-4">The History of The Web</h1>
    <div class="text-gray-700 leading-relaxed md:columns-2 lg:columns-3 gap-x-8">
      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="mb-4">Suspendisse potenti. Nunc finibus, nulla ac suscipit rhoncus, libero quam ultricies arcu, a fermentum ex augue eu est. Cras in rhoncus elit. Vivamus vel feugiat mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Morbi id ante vitae erat sollicitudin luctus.</p>
      <p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. Curabitur vitae velit ut dui accumsan scelerisque. Integer eget ante et velit tincidunt viverra. Praesent et quam egestas, finibus elit ut, congue arcu.</p>
    </div>
  </div>
</body>
</html>

控制列间距、分隔线和断点

为了获得精美的多列布局，你需要控制列之间的空间和分隔线，以及内容的断点。

**列间距：** 使用 gap-x-* 工具类（例如 gap-x-8）来控制列之间的空间。
**列分隔线：** 尽管 Tailwind 没有内置的 column-rule 工具类，但你可以通过插件轻松创建它们，或者在 Flexbox/Grid 容器上使用 divide-x-* 工具类作为替代方法，如果你的布局允许的话。
**防止断裂：** 为防止元素（例如带有标题的图像）被拆分到两列中，请在该元素上使用 break-inside-avoid 工具类。

<div class="columns-2">
  <p>Some content...</p>
  <figure class="break-inside-avoid mb-4">
    <img src="https://placehold.co/400x200" class="w-full rounded-lg">
    <figcaption class="text-sm text-center italic mt-2">This caption will stay with its image.</figcaption>
  </figure>
  <p>More content...</p>
</div>

最佳实践和用例

**理想用例：** 最适合流式排布文本（文章）、链接列表（页脚）或图像画廊，这些内容的顺序不严格水平。
**响应式是必须的：** 多列布局通常不适用于窄视口。始终使用 md:columns-2 等响应式变体，以确保在所有设备上都能获得良好的阅读体验。
**无障碍性：** 请注意，内容会从一列的底部流向下一列的顶部。如果实施不当，这可能会对屏幕阅读器用户造成非标准阅读顺序。请确保 HTML 中内容的逻辑顺序是正确的。