纯css实现列表元素宽度、间隔自适应

Question

如图，怎么使用css实现以下效果：

1. 每个子元素宽度、元素间间隔存在最大、最小值
2. 每行元素从左往右排列
3. 每行元素总宽度足够时，则左右靠边，拉伸收缩元素间间隔
4. 减小/增大容器宽度到一定程度，每行元素减少/增加一个，但左右仍靠边
5. 兼容ie11及以上
6. 不使用媒体查询（需兼容的分辨率跨度大，元素宽度最大值小）

Answer 1

flex 不行吗？

Answer 2

html:

<div class="wrap">
        <div
          class="content"
          v-for="(item, index) in list"
          :key="index"
          :data="item"
        />
        
        <!-- 隐藏div，当这一行元素数量过少时，占用flex的列数
          具体数量依据元素宽度、需要兼容的最大分辨率调整 -->
        <div class="hiden-div" />
        <div class="hiden-div" />
        <div class="hiden-div" />
        <div class="hiden-div" />
        <div class="hiden-div" />
        <div class="hiden-div" />
      </div>

css

.wrap {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
}
.content {
  flex: 1 0 150px;
  height: 20px;
  text-align: center;
  background: #f0a;
}
.hiden-div {
  flex: 1 0 150px;
}

Answer 3

<div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<style>
    .flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item{
        width: 500px;
        height: 100px;
        background: #000;
        margin-top: 100px;
    }
</style>