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％。依此类推..，直到出现标准视图，每行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>

自动调整项目大小，知道最大行数

1 个答案: