弹性盒子 justify-content: space-between； 换行问题_弹性盒子自动换行

用弹性盒子布局的时候  想一行排列n 个元素  让他们具有相等的距离而且换行  但是 只要元素多了 一换行  就会出现下面这个问题 以一行排列四个元素为例

第二行 换行之后串位了 

解决办法 就是将 元素最后面加上可变数量的元素 并且隐藏 

    <script>
        (num => {
            let container = document.querySelector('.container')
            let boxs = container.querySelectorAll('.box')
            let y = boxs.length % num
            let addBoxNum = num - y
            for (let index = 0; index < addBoxNum; index++) {
                let container = document.querySelector('.container')
                let cloneBox = boxs[0].cloneNode(true)
                cloneBox.style.visibility = 'hidden'
                container.appendChild(cloneBox)
            }
        })(4)//每行排列元素的数量
    </script>

效果

 完美解决