解决flex布局space-between最后一行布局问题超简单方法

至尊绝伦

已于 2022-08-16 08:55:59 修改

阅读量1.2w

点赞数 13

分类专栏：笔记文章标签： css html

于 2022-04-19 21:51:58 首次发布

本文链接：https://blog.csdn.net/m0_51636525/article/details/124284059

版权

当使用flex布局并设置justify-content为space-between、space-evenly或space-around时，若最后一行子元素数量不同于其他行，会导致布局不一致。通过在最后一行添加(n-2)个无高度的span元素，并设定宽度，可以解决这一问题。文章以一个包含7个item的容器为例，详细解释了为何需要添加n-2个span以及如何实现最后一行与其它行的对齐。

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

如果flex布局中justify-content设置为space-between、space-evenly或者space-around

并且最后一行与上面一行个数不同时，布局会裂开

1个container父元素包裹了7个item子元素，1行想设置4个，最后一行的item不到4个，但想靠左

<div class="container">
        <div class="item item1">1</div>
        <div class="item item1">2</div>
        <div class="item item1">3</div>
        <div class="item item1">4</div>
        <div class="item item1">5</div>
        <div class="item item1">6</div>
        <div class="item item1">7</div>
</div>