调整段落间距（在div内），以使左右的div左右两侧的间距始终相等

由 发布于

我有三个div，使用flex容器在一行上按列对齐。

第一和第三列各有少量文本，中间列有较大的段落。

我想做的是对齐中间div中的文本，以使它与第一和第三div之间的间距始终相等，即使页面的宽度发生变化并且单词换行到下一行。

默认情况下，自动换行行为意味着您可以在div的右边得到很多空格，这与左边的空格不相等（由于单词长度的变化）。如何确保间距根据最长的单词（我假设是最长的单词）进行调整，因此它始终相等？

这是一些示例代码：

.container {
  display: flex;
}
<div class="container">

  <div class="column1">
    <p>
      Some content
    </p>
  </div>

  <div class="column2">
    <p>
      There is more content in this div than the other divs. Blah, blah, blah, blah, blah, blah...
    </p>
  </div>

  <div class="column3">
    <p>
      Some content
    </p>
  </div>

</div>

如果扩大和缩小窗口，可以看到随着中间列的单词更接近换行，div的两侧间距不相等。右边的空间比左边的少。这是我想解决的问题，因此div之间的间距始终相等。