基于前端布局神器display:flex 页面布局justify-content 属性

我们要解决问题，要先知道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

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