两列 Flexbox 布局中的“平衡段落”？答案

【问题标题】："Balanced Paragraphs" in a Two-Column Flexbox Layout?两列 Flexbox 布局中的“平衡段落”？
【发布时间】：2018-12-27 16:16:29
【问题描述】：

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

<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 会根据段落中的内容量来调整在一个列中显示的段落与在另一个列中显示的段落，从而使列平衡？

谢谢

【问题讨论】：

考虑发布一个完整的示例，包含段落文本和 CSS，以便我们进行测试。
CSS 中没有这样的功能。段落将在 DOM 中定位时显示。但是你可以平衡文本。

标签： css flexbox grid

【解决方案1】：

段落将在 DOM 中定位时显示。但是你可以平衡文本。

.passage-container {
  columns: 2;
  column-gap: 50px;
}
.passage-container p {
  text-align: justify;
}
.passage-container p:first-child {
  margin-top: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="passage-container">
  <p>1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nesciunt.</p>
  <p>2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Tempora corporis nostrum qui distinctio impedit!</p>
  <p>3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora maxime delectus fuga sapiente commodi, nihil fugit neque distinctio consequuntur modi eligendi sequi, nemo quasi soluta voluptas cupiditate, quas beatae!</p>
  <p>4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nesciunt.</p>
  <p>5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Tempora corporis nostrum qui distinctio impedit!</p>
  <p>6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora maxime delectus fuga sapiente commodi, nihil fugit neque distinctio consequuntur modi
    eligendi sequi, nemo quasi soluta voluptas cupiditate, quas beatae!</p>
</div>
</div>

【讨论】：

【解决方案2】：

试试css列

.passage-container {
    columns: 2;
}

它们运行良好，但有时会令人沮丧，但 break-side/before/after 规则可以帮助您处理格式。详情见：https://developer.mozilla.org/en-US/docs/Web/CSS/columns

【讨论】：