flex-warp换行 填充盒子

flex-wrap: wrap;
justify-content: center;

flex-warp换行 填充盒子_第1张图片

动态填充 空盒子 

flex-warp换行 填充盒子_第2张图片

全部代码

<!DOCTYPE html>
<html>

<head>
  <title>flex布局的应用</title>
  <style type="text/css">
    .wrap {
      width: 1300px;
      display: flex;

      flex-wrap: wrap;
      justify-content: center;
      justify-items: center;
      text-align: justify;
      /*子元素溢出父容器时换行*/
      background-color: palegreen;
    }



    span {
      display: flex;
      justify-content: center;
      width: 200px;
      height: 100px;
      background-color: green;
      color: #fff;
      border-radius: 5px;
      margin-top: 10px;
      margin: 10px;
    }
    .red{
      background-color:teal;
    }
  </style>
</head>
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<body>
  <script>
    $(function () {
      let width = $("#wrap").width();
      let size = $('#wrap').children('span').length
      let lineN = Math.floor(width / 220);
      // let addI=Math.floor((width/220)-(size%(width/220))) ;
      if (size % lineN == 0) {
        return;
      }

      let addI = lineN - (size % lineN);
      for (let i = 0; i < addI; i++) {
        let html = "  填充" + i + ""
        $("#wrap").append(html);
      }


    });
  </script>


  <div id="wrap" class="wrap">
    <span>11</span>
    <span>22</span>
    <span>33</span>
    <span>44</span>
    <span>55</span>
    <span>66</span>
    <span>77</span>
    <span>88</span>
  </div>
</body>

</html>

结语: space-between 其实也一样 只是将动态添加 的js 给改一下

你可能感兴趣的:(VUE)