NEWS
SEO资讯
您当前位置:华帅SEO > 站长资讯 > SEO资讯 > 正文
flex布局解决最后一排数量不够自动向两端排列问题
作者:华帅技术部  更新时间:2020-11-05 21:08:05

flex布局,当最后一行数量不够时,会出现下面布局

QQ截图20201105141143

那么要实现下面如下效果怎么操作呢:

QQ截图20201105141151

方法一:仅适用于三列布局

列表
.item-flex{    display: flex;    flex-wrap: wrap;    justify-content:space-between;    text-align: justify;  }    .item-flex:after{    content: '';    width: 30%;  }  .item-list{    width:30%;  }

方法二:适用于四列、五列…更多情况

列表
 
.item-flex{  display: flex;  flex-wrap: wrap;  justify-content:space-between;  justify-items: center;  text-align: justify;}.list{  content: '';  width: 240px;  border:1px solid transparent;  padding: 5px;  overflow: hidden;}.item-list{  width:240px;  border:1px solid #ff6600;  margin-bottom: 10px;  padding: 10px 5px;  display: flex;  justify-content: center;}
这里的 row 即是每列元素的个数,4列,5列。。。更改这个值即可

文章来源:田珊珊个人博客

NEWS站长资讯
  • 公司名称:合肥华帅SEO技术信息服务有限公司
    售后电话:15862658116
    Q  Q:1701743642
    邮  箱:dshuai0557@163.com
    地  址:合肥市肥东县燎原路与香石路交叉口5855号
    seo.caifuqn.com @ 2012-2028 合肥华帅SEO技术信息服务有限公司 , 皖ICP备11014979号 , 技术支持:润鸿网络|猪八戒|威腾互联|一团网|卢松松|搜爱外链|老铁商城|A5