一个考验基本功的功能,而我现在也才用了最流行的一种方法,希望看到的有思路的可以写下自己的做法,一整段代码如下:

实现思路:通过获取父元素的宽度以及子元素宽度进行一系列计算,补齐最后一行,达到justify-content:wrap的时候,依旧完美左对齐

<html>
    <head>
        <title></title>
        <style>
            .input1{
                width: 100px;
            }
            .parent{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                width: 387px;
                border: solid 1px #000;
            }
            
            .parent div{
              width: 80px;
              height: 80px;
            }

            .child1{
              background: yellow;
            }
            .child2{
              background: rgb(234, 0, 255);
            }
            .child3{
              background: pink;
            }
            .child4{
              background: rgb(255, 187, 0);
            }
            .child5{
              background: green;
            }
            .child6{
              background: rgb(0, 195, 255);
            }
            .childBlank{
                background-color: #ffffff;
            }

        </style>
    </head>
    
    <body>
        <div class="parent">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
            <div class="child4"></div>
            <div class="child5"></div>
            <div class="child6"></div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function calcChild(){
            console.log(1234568888)
            var parentWidth = $(".parent").width();
            var childWidth = $(".parent div").width();
            var sumChild = $(".parent div").length;
            console.log(parentWidth,childWidth,sumChild);

            //每行最多个数
            var maxNum = Math.floor(parentWidth/childWidth);
            console.log(maxNum);
            //最后一行缺多少个
            if(sumChild > 0){
                var needAddNum = (sumChild%maxNum);
                console.log(needAddNum);
                for(var i = 0;i<needAddNum;i++){
                    $(".parent").append("<div class='childBlank'></div>");
                }
                
            }
        }
        calcChild()
    </script>
</html>

复制代码就能看效果了,可是代码并没有实现监控父元素宽度变化,而去改变子元素的补充个数问题,大家可以自己捣鼓捣鼓。