使未知数量的项目列表伸展到容器的整个宽度，响应

Question

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

无论浏览器大小（自适应），列表项都应占据容器的所有宽度。目前，如您所见，容器右侧有一个 space。一行的最后 li 项应与边框的末端对齐。

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

谢谢！

.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 的元素仍然占据屏幕 space，弹性框将在布局期间考虑它们：

在 this fiddle 中，随着视口的增大和缩小，元素保持均匀 spaced。

使未知数量的项目列表伸展到容器的整个宽度，响应

Make a list of an unknown number of items stretch to full width of container, responsive

html

css

flexbox