Flex布局+margin 如何实现列表布局

最主要的就是计算 父元素的宽度减去盒子的数量在乘以一个子盒子的宽度 等于所有子盒子占的宽度 下面代码展示：

css：

      .tem-flex {
        width: 500px;
        display: flex;
        flex-wrap: wrap;
      }
      .tem-list {
        border: 1px solid #ff6600;
        /* 需要排列几个 */
        --n: 3;
        /* 百分之百减去盒子的数量在乘以一个盒子的宽度 等于所以盒子占的宽带 */
        --rest: calc(100% - var(--n) * 50px);
        /* 平均分配左右空间： 剩余空间除以盒子的数量 因为设置的左右margin 所以要除二 */
        margin: 10px calc(var(--rest) / var(--n) / 2);
      }

html:

    <div class="tem-flex">
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
      <div class="tem-list">列表</div>
    </div>

效果展示：

如果要设置响应式的话 只需改变 --n的值