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

callBack_____

于 2022-11-17 09:20:06 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/callBack_____/article/details/127897370

本文介绍了一种解决Flex布局中元素换行后不对齐的问题的方法。通过在容器末尾添加并隐藏额外的元素来确保每行元素均匀分布且对齐。此技巧适用于需要在Flex布局中保持元素美观对齐的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用弹性盒子布局的时候想一行排列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>

效果