制作一个未知数量的项目列表，扩展到容器的整个宽度，响应

Question

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

无论浏览器大小（响应），列表项都应占用容器的所有宽度。目前，正如您所看到的，容器右侧有一个空格。行的最后一个li项应该与边框的末尾一致。

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

谢谢！

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

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的元素仍会占用屏幕空间，因此在布局期间，弹性框会考虑它们：

在this fiddle中，元素在您增长和缩小视口时保持均匀间隔。