html - 将文本对齐到全宽和相等的自动间距

Question

假设我有 N 个单词。例如以下；

• 狗
• 花生
• 橘子
• 柠檬
• 纪律处分

所有这些词都有不同的长度。

假设我有一个宽度可变的容器 X(容器可以随页面缩放)。

我想要的是将水平线上的单词与单词之间的 N-1 等间距对齐。最左边的词左边不能有空格，最右边的词右边不能有空格。最左边单词的左侧应该与容器的左侧相切/接触，而最右边单词的右侧应该与容器的右侧相切/接触。

这是一张我希望它看起来如何的图片。

使用 html/css/js 实现它的最佳方法是什么？

我的第一个想法是；

• calc(expression): 但我不知道文本的宽度？
• margin: 0 auto: 但这适用于多个元素吗？浏览器支持怎么样？
• CSS flexbox:我对此经验不多。
• 一些智能 js 实现:如何实现？

注意:我确实看到了这个线程。它很相似，但不完全是我要找的东西；

Equal and full width navigation

Answer 1

如果你添加一个<span>在每个单词周围，你可以给 parent :

display: flex;
flex-wrap: wrap;
justify-content: space-between;

所有元素之间的间距相等，如果空间不足，则会换行。