html - 如何在可包装的 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>

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

Answer 1

I want all items to have the same width, so I applied the following CSS attributes: flex-basis: 0 and flex-grow: 1.

这是错误的做法。使用 flex-grow，您可以在容器中分配可用空间。由于每一项的内容长度不同，每行的空闲空间也会不同。因此，尽管每个元素都有 flex-basis: 0，但列不会跨行对齐。

With that, each item in every column should have had the same width, independently from its original width.

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

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 元素不能缩小超过其内容的大小。看这里:Why don't flex items shrink past content size?

这里有一个可能有用的解决方案:

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 /width 为 33.33%，如果您决定添加垂直边距，这可能导致每行有两个元素。

因为 flex-grow 会占用行上的空闲空间，flex-basis 只需要足够大就可以强制换行。在这种情况下，使用 flex-basis: 26%，有足够的边距空间，行被精确填充，没有足够的空间容纳第四个元素。