0

我有一个 100% 宽的 flexbox，其中包含动态数量的动态大小的项目。这是它可能看起来的示例：

在此处输入图像描述

.container {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  gap: 0.75rem;
}

.container > div {
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  display: inline-block;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}
<div class="container">
  <div>Lorem ipsum</div>
  <div>dolor sit amet</div>
  <div>consectetur adipiscing elit</div>
  <div>sed do eiusmod</div>
  <div>tempor incididunt</div>
  <div>ut labore</div>
  <div>et dolore</div>
</div>

我希望每行中的最后一项（或“列”）扩展其宽度以填充该行中剩余的空白空间。结果应如下所示：

在此处输入图像描述

.container {
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  gap: 0.75rem;
}

.container > div {
  background: teal;
  color: #f8f8f8;
  font-family: sans-serif;
  display: inline-block;
  padding: .25em .4em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-weight: bold;
  border-radius: .25rem;
}
<div class="container">
  <div>Lorem ipsum</div>
  <div style="flex-grow:1">dolor sit amet</div>
  <div style="flex-grow:1">consectetur adipiscing elit</div>
  <div>sed do eiusmod</div>
  <div style="flex-grow:1">tempor incididunt</div>
  <div>ut labore</div>
  <div style="flex-grow:1">et dolore</div>
</div>

有没有办法用纯 CSS 实现这一点？请注意，项目的数量以及它们的宽度和容器的整体宽度是动态的。该解决方案不一定必须涉及弹性盒。基于网格的方法或其他方法也可以。

编辑澄清以回应约翰内斯的回答（现在不再存在）： 我事先不知道哪一项将是每一行中的最后一项，因为这取决于项目的数量，每个项目的宽度item，还有容器的宽度，这些我都是事先不知道的。因此flex-grow:1，无法添加到特定项目。

4

0 回答 0