css - 两列 Flexbox 布局中的 "Balanced Paragraphs"？

Question

我有一些看起来像这样的代码

<div class="passage-container">
    <p>Paragraph 1...</p>
    <p>Paragraph 2...</p>
    <p>Paragraph 3...</p>
    <p>Paragraph 4...</p>
    <p>Paragraph 5...</p>
    <p>Paragraph 6...</p>
</div>

如果所有段落文本的长度都相同，我可以在第 3 段之后分栏，让第 4 段开始新栏。但更重要的是一些段落会比其他段落长/短，所以有可能，例如，我希望第 1 段和第 2 段位于第一列，然后第 3-6 段位于第二列。

有没有一种方法仅使用 CSS 来实现此功能，其中 flexbox 将根据段落中的内容量调整一列与另一列中显示的段落，从而使列保持平衡？

谢谢

Answer 1

试试 CSS 列

.passage-container {
    columns: 2;
}

它们工作得很好，但有时会令人沮丧，但中断边/之前/之后的规则可以帮助您处理格式。更多详情请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/columns