解决flex布局弹性布局使用justify-content:space-between后最后一行多个元素排版问题

何故沾衣欲湿杏花雨

已于 2022-10-17 15:20:57 修改

阅读量652

点赞数

文章标签： css css3 html

于 2022-10-17 14:40:49 首次发布

本文链接：https://blog.csdn.net/djxyyy/article/details/127362731

版权

本文探讨了在使用flex布局时，如何处理justify-content:space-between属性导致的最后一行元素排版异常的情况。通过添加伪类或占位元素的方法，实现了期望的布局效果。详细介绍了两种解决方案的HTML和CSS代码实现。

摘要由CSDN通过智能技术生成

解决flex布局弹性布局使用justify-content:space-between后最后一行多个元素排版问题

1、当一行有三个元素的时候直接加个伪类

原图：
请添加图片描述

想要实现的效果

请添加图片描述

html代码

<div class="floor-centerList">
<div class="item" v-for="(item,index) in servelist"></div>
</div>

style代码

.floor.centerList{
display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
}
<!--加上after伪类，解决最后一排数量不够两端分布的情况-->
  .floor.centerList:after{
    content: '';
    width: 子元素的宽度;
    border:1px solid transparent;
  }

2.当一行有3个以上的元素时，添加占位元素
html代码

<div class="floor-centerList">
      <div class="item" v-for="(item,index) in servelist"></div>
      <div class="pick" v-for="(val,i) in 6"></div>
</div>
 
style代码

.pick{
        width: 224px;
        overflow: hidden;
    }