Css 弹性项目-宽度不一致

我有一个包含多个项目的flex容器。它非常简单-100%宽度的容器内有文本元素。文本元素可以是不同的宽度，并且需要全部适合100%的宽度。如果宽度不够，可以根据需要包裹各个图元。这很有效

现在，当有足够的宽度使所有元素都适合而不需要包装时，它们之间就有相等的空白。但是，当元素在宽度和文本换行中收缩时，它们的间距似乎不再正确。flex basis似乎计算不正确，因此，那些封装的元素在右边有一个更大的空白（这是一个ltr容器）

以下是代码和相关代码：

HTML：

<ul>
<li>Longer item</li>
<li>Short</li>
<li>Even longer item</li>
<li>Another long item</li>
<li>And another one</li>
<li>Item6</li>
<li>Item 7</li>
<li>Average item</li>
<li>I need a few</li>
<li>This should be enough</li>
</ul>

无包裹时的所有等间距：

缠绕时间距不均匀：

---

如何使项目之间的间距始终相等，而不考虑单个项目的包装（或不包装）？

您需要将其添加到css中。在您的

中添加此flex wrap:wrap，以便能够包装列表，然后你需要在你的

中添加最小宽度，这样当你调整浏览器的大小时，列表项的间距就不会缩小。

你做不到-这只是flex子系统内部的包装方式-这不是

flex基础

的问题。是关于包装的。看看上面的链接。是的，现在看看这些问题。看起来不太有希望。我的客户说：“我需要这样做——这是你要解决的问题。”。有什么办法吗？你可以试试CSS网格的

自动填充

/

自动调整

功能。这将解决间距问题。但它可能需要您定义列宽。您没有抓住要点：列表不应该换行，只应该换行单个项目中的文本。您的意思是项目不会换行，但文本会换行，以获得相同的相等间距。。？我唯一能想到的就是让

的填充大于5px，然后添加一个单词break:break all，这样列表中的文本就会换行。而填充物就是空隙。我希望这就是你想要的。

ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

li {
  flex: 1 1 auto;
  list-style: none;
  padding: 5px;
}