Question

我有一个flexbox，其中水平放置了三个项目（div）。我希望这些项目之间的间距相等。但问题是，这些div中的文本易碎。

在下面的示例中，第1项和第2项之间的间距小于第2项和第3项之间的间距，因为第2项中的文本是自动换行的，而div的宽度没有调整。

关于如何在不打断文字的同时实现等间距的任何建议？

（请注意，示例中的背景色是为了说明第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。

其他可能的解决方案暗示设计而不是代码，例如完全，您用来演示此问题的方式：为元素提供独特的背景，以便它们在视觉上由实际元素大小而不是由实际元素定义。包含文字。
或者给他们一个独特的border。

您还应该考虑使用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 。为了简化您的问题以便更清楚地理解，您应该考虑每个元素只有一行（因为当一行多于一个时，问题仍然会在每一行上重复出现，而在另一行上也会重复出现）。

期望的结果是，以这样的方式呈现这些行中的每一行：通过按比例更改一个或多个文本属性，使行的内容可以在任意分配的空间上延伸，并使第一个字母与最左边的行对齐分配空间的一边，并将最右边的字母与分配空间的正确界限对齐。
从技术上讲，您可以通过修改：

单词之间的间隔（当行中有多个单词时）
字母之间的空格
字体大小
以上各项的组合

仅使用CSS，您只能使用以下方法按比例动态地修改单词之间的间隔：

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

您还可以使用letter-spacing属性修改字母之间的距离，还可以修改font-size，但不能修改“动态地” （这样就可以填充所需的精确地留出空间）-您可以使用JavaScript即时计算出这种变化，但是无论您做什么，机会都不能戴一副手套。
经验法则是：尝试使其变得干净自然。

撇开技术因素，尝试解决真实问题（“看起来不太好” ），正确的答案是：与设计师交谈。

经过培训，设计师可以通过添加，删除或更改普通程序员不会考虑的细节，或者更确切地说，是不会想到的细节，来将外观一般的东西甚至是外观不好的东西变成看起来很棒的东西。。。

带有环绕文字的flexbox项之间的间距相等

1 个答案: