如何在可装入的弹性框中使所有项目的宽度相同？

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

  

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

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

  

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

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

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。见这里：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%，边距有足够的空间，行被精确填充，并且没有足够的空间容纳第四个项目。

Answer 2

您可以使用特定宽度：

li{
   flex: 0 0 20%;
}

或者

li{
   flex: 1 0 0;
}