我有一个固定宽度的容器元素，它包含几个可变宽度的子元素。我想在这些元素之间均匀地分配额外的空间。如果元素中没有一个包含自动换行的文本，这很容易做到。但是如果总的内容比不换行的容器所能容纳的要宽，我就不知道如何在元素之间分配空间了。
下面是一个演示，显示了它在没有换行时工作得很好，但在有换行文本时就不行了：https://codepen.io/justingrant/pen/bGKKJje
如果我使用flex-basis: auto（默认值），则换行项有较宽的填充，而非换行项没有填充。如果我使用flex-basis: 1px（或任何相同的宽度），则项的宽度相同，因此文本较宽的项有较少的填充。
相反，我想在所有项目之间平均分配额外的空间，而不管它们是否换行。这可能吗？
请注意，我 * 不 * 想做的是为所有项分配固定的填充，因为这将溢出容器并占用大量额外空间。我只想均匀分配额外空间。
第一个
2条答案
按热度按时间6jjcrrmo1#
我猜在你的
.bad例子中，问题来自于你的flex框的宽度限制。列表项已经有了它们能得到的最大空间，所以它们不能增加任何填充。如果您自己在列表项中添加一些填充，就可以看到这个问题。
我在你的
<li>元素中添加了10px左右填充padding: 10px 10px;。这样的话，所有列表项的填充都是一致的，但是这些项会变得很大，并且会粘在flex框的外面。第一个
因此，我只看到两个选项，以便为所有项目提供相等的填充。
第一种情况，让单词在任何地方断开：
你可以添加10px左右填充，如在上面的例子，此外，还添加
word-break: break-all;这样的项目将不会增长更大，因为他们可以，有相等的填充，但它很难阅读，因为你允许单词在任何位置打破。第一次
或者第二种情况，让弹性盒 Package 其物品：
同样，在左右两边添加10px，而且，不用在任意位置断开文本，可以让项目本身绕到下一行，在
<ul>元素上添加flex-wrap: wrap;。您可能还希望从
<li>元素中删除flex-grow: 1;，或者某些项会增长到整个flex框宽度。第一个
只是为了再次 Package 它，我不知道有任何方法不这样做（打破任何地方的话或 Package 项目到下一行），并保持您的灵活框内的项目。
当然，您也可以尝试使用
gap和其他属性，以便将项目放入特定的容器宽度中。但是，一旦容器中有更多的项目（例如，它们不是硬编码的，而是从数据库中提取的），您就会遇到一个限制，即无法再以统一的方式显示项目。fae0ux8s2#
这里仍然有太多的CSS，但你可以决定你希望列表文本如何在内部换行，以及哪一个在视觉上最吸引你。第一个块是你的，另外两个我 Package 在一个容器中，以更好地控制流IMHO。基本概念是实际上说你想要什么填充。
第一个