基于前端布局神器display:flex 页面布局justify

我们要解决问题，要先知道Flex布局是什么？有关于Flex布局布局网上搜的有一大堆，怎么使用，怎么设置，我这里是解决问题，使用display布局之后 所有元素进行等比划分尤其是列表循环的数据比较多的时候，
这个时候就要进行跨行的姿势了。

一般的一个布局下面有三个区域划分用到下面这个是没有问题的，

      .box {
        padding: 10px;
        width: 500px;
        height: auto;
        background:grey;
        display: flex;
        flex-wrap: wrap;[图片上传中...(微信图片_20201029144855.png-ffc380-1603954150347-0)]

        flex-direction: row;
        justify-content: space-between;
      }
      .box li {
        width: 150px;
        height: 100px;
        margin-bottom: 10px;
        text-align: center;
        background: red;
        line-height: 100px;
      }

图.png

但是如果，多了一个元素怎么办呢，如果不改边样式的，就会出现中间空出来的一个bug

image.png

现在来解决这个问题，在这里提供两个方法：
1.伪类：after (强烈推荐这种方法)

 .box:after {
        content: '';
        width: 150px;
        height: 100px;
      }

image.png

1.提供占位元素

    <ul class="box">
      <li class="first-box">
        第一个盒子
      </li>
      <li class="second-box">
        第二个盒子
      </li>
      <li class="third-box">
        第三个盒子
      </li>
      <li class="fourth-box">
        第四个盒子
      </li>
      <li class="fifth-box">
        第五个盒子
      </li>
      <li class="sixth-box" style="visibility: hidden;">  <!-- 占位 -->
        第六个盒子
      </li>
    </ul>

但是如果 布局一行有 4个，5个呢，上面的这种方法就不适用了，需要用到下面这中方法了
利用 width: calc();来进行 布局页面修改

      .box {
        padding: 10px;
        width: 600px;
        height: auto;
        background:grey;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .box li {
        /* width: 100px; */
        width: calc((100% - 10px * 5) / 5);
        height: 100px;
        margin-bottom: 10px;
        margin-right: 10px;
        text-align: center;
        background: red;
        line-height: 100px;
      }

image.png

暂时就这么多，希望可以帮到你，谢谢