css - 如何使用可能会扩展高度的左对齐文本制作均匀间隔的 flex 内容？

Question

我一直在努力解决这个问题，我想我实际上可能遇到了一些不可能的事情。

我有一个导航菜单，它的内容长度存在一些极端差异。即使换行发生在哪里，我也想完美地分隔该内容，具体取决于父容器的宽度。我为此使用了 flexbox，但我似乎无法得到我正在寻找的东西。

这是我的标记：

.nav-holder {
  width: 500px;
  border:1px solid blue;
  padding: 1px;
}
.nav{
  display: flex;
  flex-wrap: nowrap;
  justify-content:space-between;
  width: 100%;
}
.nav-item {
  border: 1px solid red;
}

<div class="nav-holder">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">Manufacturing Services</div>
    <div class="nav-item">Specialized Manufacturing Services</div>
    <div class="nav-item">Media &amp; News</div>
    <div class="nav-item">Contact</div>
  </div>
</div>

这是正在发生的事情：

这是我想要发生的事情：

我通过手动将两个长项的宽度设置为精确像素来实现这一点。考虑到内容可能会发生变化，这是不可接受的。

如果 div 太长并且必须中断到下一行，而不是什么都不填满该空间的其余部分，我基本上希望 div 获得实际内容的确切宽度。

标签： cssflexbox