flex-warp换行填充盒子

最新推荐文章于 2022-11-23 17:48:20 发布

MrYangZCH

最新推荐文章于 2022-11-23 17:48:20 发布

阅读量580

点赞数

分类专栏： VUE 文章标签： flex-warp换行填充盒子

本文链接：https://blog.csdn.net/Mr_yangzc/article/details/103341399

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

动态填充 空盒子

在这里插入图片描述

全部代码

<!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 = " <span class='red'> 填充" + i + "</span>"
        $("#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 给改一下

MrYangZCH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex-warp换行填充盒子

flex-wrap: wrap;justify-content: center;动态填充空盒子全部代码<!DOCTYPE html><html><head> <title>flex布局的应用</title> <style type="text/css"> .wrap { ...
复制链接

扫一扫