html - 使未知数量的元素列表拉伸(stretch)到容器的整个宽度，响应

Question

我有一个未知数量的元素列表。容器有一个显示宽度的顶部边框。

无论浏览器大小(响应式)，列表项都应占据容器的所有宽度。目前，如您所见，容器右侧有一个空间。一行的最后一个 li 元素应该与边框的末端对齐。

没有大量的媒体查询怎么办？最终结果如下图。基本上，调整大小时应该改变的是列表项之间的空间。

谢谢!

.Container{
  width:40px;
  height:40px;
  background-color:red;
  display:inline-block;
}
#list{
  padding:20px 0 0 0;
  border-top: 4px solid black;
  width:50%;
  list-style-type:none;
}

<ul id="list">

    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
    <li class="Container"></li>
  
</ul

Answer 1

这是一个灵活的解决方案:

#list{
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding:20px 0 0 0;
  border-top: 4px solid black;
  width:30%;
  list-style-type:none;
}

.Container{
  width:40px;
  height:40px;
  background-color:red;
  margin: 1px;
}

这适用于除最后一行之外的所有行:

解决方法是添加附加元素，隐藏可见性:

.hidden {
  visibility: hidden;
}

<li class="Container hidden"></li>
<li class="Container hidden"></li>
...

由于 visibility: hidden 的元素仍然占用屏幕空间，flex box 将在布局时将它们考虑在内:

在this fiddle ，当您扩大和缩小视口(viewport)时，元素保持均匀间隔。