html - 带有换行文本的 flexbox 元素之间的间距相等

Question

我有一个 flexbox，其中三个元素 (div) 水平放置。我希望这些元素之间的间距相等。然而，问题是我在这些 div 中有易碎的文本。

在下面的示例中，元素 1 和元素 2 之间的间距小于元素 2 和元素 3 之间的间距，因为元素 2 中的文本在换行时没有调整 div 的宽度。

关于如何实现相等间距同时仍允许中断文本的任何建议？

(注意例子中的背景色是为了说明item 2偏心的问题)

.outerContainer {
  width: 430px;
}

.container {
  display: flex;
  padding: 20px;
  background-color: tomato;
}

.container > div:not(:last-child) {
  margin-right: 20px;
}

.container > div {
  background-color: pink;
  word-break: break-word;
  display: flex;
}

.fig {
  border: 2px solid black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

<div class="outerContainer">
  <div class="container">
    <div>
      <div class="fig">1</div>
      <div>two words</div>
    </div>
    <div>
      <div class="fig">2</div>
      <div>some we somewrap </div>
    </div>
    <div>
      <div class="fig">3</div>
      <div>some text</div>
    </div>
  </div>
</div>

Answer 1

您似乎在寻找 text-align: justify。

其他可能的解决方案意味着设计而不是代码，例如正是您用来演示问题的方法:给您的元素一个独特的背景，这样它们就可以通过实际元素大小在视觉上定义，而不是通过包含文本。
或者给它们一个与众不同的边框。

您还应该考虑 word-break: break-word(它不会增加同一行中单词之间的空格来对齐文本，它只是在可用行空间的末尾断开单词)。

如果像这样呈现，您是否仍能说明您的元素的间距不均匀？

.outerContainer {
  width: 400px;
}

.container {
  display: flex;
  background-color: #888;
  padding: 20px;
}
.container > * {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
  padding: 20px;
  box-sizing: border-box;
  word-break: break-word;
  color: #666;
}
.container > div:not(:last-child) {
  margin-right: 20px;
}

.container > div {
  background-color: white;
}

<div class="outerContainer">
  <div class="container">
    <div>two words</div>
    <div>and some short somelongword</div>
    <div>some text</div>
  </div>
</div>

---

除上述之外，您的问题的答案是:不可能使用 CSS。为了简化您的问题以便更清楚地理解，您应该考虑每个元素只有 1 行(因为当有多行时，问题仍然会在每一行上重复，有些行比其他行多)。

期望的结果是，每一行的呈现方式是，通过按比例更改一个或多个文本属性，它们的内容将延伸到任意分配的空间，以使第一个字母与最左边对齐分配空间的一侧，并将最右边的字母与分配空间的右边界对齐。
从技术上讲，您可以通过修改来实现:

1. 单词之间的空格(当行有多个单词时)
2. 字母间距
3. 字体大小
4. 上述的组合

仅使用 CSS，您只能按比例动态修改单词之间的间距，方法是:

text-align: justify;
text-align-last: justify;

您还可以修改字母之间的距离，使用 letter-spacing 属性，您还可以修改 font-size 但不是“动态”(以便它准确地填充所需的空间)——您可以使用 JavaScript 即时计算此类变化，但无论您做什么，很可能一只手套不适合所有尺寸。
这里的经验法则是:尽量让它干净自然。

---

抛开技术细节并尝试解决真正的问题(“它看起来不太好”)，正确的答案是:与设计师交谈。

设计师受过训练，可以通过添加、删除或更改普通程序员不会考虑的细节，或者更确切地说，不会考虑将看起来很普通的东西或什至看起来很糟糕的东西变成看起来很棒的东西 < strong>那些特殊的变化会让这该死的东西看起来那么很好。