html - 知道最大行数自动调整元素大小

Question

我有一个小部件，它可能包含不同数量的元素(它们是自动生成的)，从 1 到 12 个元素。所以我的初始设置是每行设置 3 个元素，因此最多有 4 行 (12/3):

ul {
  list-style-type: none;
  margin: 0; padding: 0;
  background-color: red;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

li {
  background-color: yellow;
  width: 30%;
  height: 20px;
  margin-bottom: 10px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

由于元素的数量可以改变，当有 1-6 个元素时，它可能看起来很难看，因为小部件的高度变化很大。所以我的问题是，是否可以自动调整元素宽度的大小，以便尽快填充小部件？

例如，如果您有一个元素，则元素宽度将为 100%，并填充一行。二、三、四项，宽度均为 100%，预期的四行已填充。当存在五个元素时，两个元素将为 50%，其余为 100%。存在六项，其中四项为 50%，其余为 100%。依此类推..，直到出现标准 View ，一行 3 个元素。

我对纯 CSS 解决方案很感兴趣，我认为使用 flex 属性应该是可能的，但我没有找到任何相关信息。

Answer 1

你就快完成了，你真的只需要添加 flex-grow 属性并将宽度更改为 min-width。

.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: red;
  flex-grow: 1;
  min-width: 30%;
  height: 20px;
  margin: 5px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>