如何在可包装的 flexbox 中使所有项目的宽度相同？

Question

我在一个可包装的flex盒子里有一个宽度可变的项目列表。

我希望所有项目都具有相同的宽度，因此我应用了以下 CSS 属性：flex-basis: 0和flex-grow: 1. 这样，每列中的每个项目都应该具有相同的宽度，与其原始宽度无关。

这是预期的结果，可以通过使用flex-basis: 30%.

不幸的是，这并不适用于所有情况（如果每个项目的宽度很小，就会有很多空白空间）。

使用固定宽度并不能解决问题，因为每个项目可能占用不同的空间。

这可以帮助说明问题，“大项目”创建 5 行（每个项目的宽度为 33%），而“小项目”仅创建 3 行（每个项目的宽度为 20%）。

我也不允许使用 JavaScript。

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
    white-space: nowrap;
    flex-basis: 0;
    flex-grow: 1;
}

<ul>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Long long long name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Long long long name</li>
    <li>Long long long name</li>
    <li>Long long long name</li>
    <li>Long long long name</li>
    <li>Short name</li>
    <li>Short name</li>
    <li>Long long long name</li>
    <li>Long long long name</li>
    <li>Short name</li>
    <li>Short name</li>
</ul>

编辑： 我对 flexbox 的工作方式有误解。此处的解决方案是为 使用适当的值flex-basis。

Answer 1

我希望所有项目都具有相同的宽度，因此我应用了以下 CSS 属性：flex-basis: 0和flex-grow: 1.

这是错误的做法。随着flex-grow你在容器分发免费空间。由于每一项内容的长度不同，每行的空闲空间也会不同。因此，尽管每个项目都有flex-basis: 0.

这样，每列中的每个项目都应该具有相同的宽度，与其原始宽度无关。

实际上，根据我上面发布的信息，“这样，每一行中的每个项目都应该具有相同的宽度，与其原始宽度无关。”

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

li {
  flex-basis: 0;
  flex-grow: 1;
  white-space: nowrap;
  list-style-type: none;
  border: 1px dashed red;
}

<ul>
  <li>Long name</li>
  <li>Long name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Short name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long name</li>
  <li>Short name</li>
</ul>

您还需要记住，默认情况下，弹性项目不能缩小超过其内容的大小，尽管flex-basis: 0. 请参阅此处：为什么 flex 项目不会缩小超过内容大小？

这是一个可能有用的解决方案：

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex: 1 0 26%; /* see note below */
  white-space: nowrap;
}

<ul>
  <li>Long name</li>
  <li>Long name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Short name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Short name</li>
  <li>Long name</li>
  <li>Long long long name</li>
  <li>Long long long name</li>
  <li>Long name</li>
  <li>Short name</li>
</ul>

注意事项flex-basis: 26%：

通过flex-grow: 1在flex简写中定义（请参阅 参考资料li），flex-basis/不需要为width33.33%，如果您决定添加垂直边距，这可能会导致每行有两个项目。

由于flex-grow会消耗行上的可用空间，因此flex-basis只需要足够大以强制换行。在这种情况下，使用flex-basis: 26%，边距有足够的空间，该行被精确填充，第四个项目没有足够的空间。