如何使文本在文本框下方保持相同的间距

Question

我正在尝试实现与周围相同空格共享的单词。但是没有得到解决方案。有人帮我吗？在我的尝试中，您可以找到单词之间的无序空间。

.parent{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width:80%;
  border:1px solid red;
}

.parent span{
  background: lightblue;
}

<div class="parent">
 <span>one text</span>
 <span>small</span>
 <span>lengthy texter than one</span>
 <span>medium text two</span>
 <span>one</span>
</div>

Answer 1

请按以下方式更新您的代码：

.parent{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; /* important */
  width:80%;
  border:1px solid red;
}

.parent span{
  background: lightblue;
}

<div class="parent">
 <span>one text</span>
 <span>small</span>
 <span>lengthy texter than one</span>
 <span>medium text two</span>
 <span>one</span>
</div>