flex布局解决最后一排数量不够自动向两端排列问题

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列。。。更改这个值即可

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

来源地址:http://www.tianshan277.com/832.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/899847.html

(0)
上一篇 2025年1月4日 01:44:45
下一篇 2025年1月4日 01:45:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 美国又出了一个“斯诺登” 偷了50TB的机密情报

    美国国家安全局承包商的一名前任雇员8日被控窃取并私藏大量机密文件,目前面临20项刑事指控。 路透社援引美国政府官员的话报道,这可能是美国历史上规模最大的政府机密失窃事件。 私藏量惊人 涉案男子名为哈罗德·马丁,现年52岁,家住美国马里兰州,…

    编程技术 2025年1月4日
    100
  • Linux系统从零到高手的进阶心得

    初次了解到Linux系统还是在我初中的时候,那时候正是在一个中二年龄,喜欢看小说,对于小说中出现的明显的非现实场景感到十分钦佩、羡慕,并常常幻想自己也有小说主人公那样的本领。那正是在这样一个充满幻想的年纪,我看到了一本关于重生、关于黑客的小…

    编程技术 2025年1月4日
    100
  • 后HTTPS时代:网站身份认证比加密更重要

    HTTPS加密应用在过去两年间取得了惊人成果,全球互联网超50%的网站流量启用HTTPS加密。然而,100%的加密环境,就等于安全吗?借助免费DV SSL证书,越来越多的恶意软件、钓鱼网站转向100%加密,得以逃避安全工具检测、欺骗用户信任…

    编程技术 2025年1月4日
    100
  • 嵌入式培训费贵?华清远见鸡年大促现良机!

    3月8日,小编从国内知名的嵌入式培训机构——华清远见了解到,当前学习智能硬件开发的年轻人越来越多,当然绝大多数人依然选择了捷径,那就是参加相关的技术培训,以短期达到能从事相关的工作,同时实现自己的价值。 但是,想要真正学习这些IT界的热门课…

    编程技术 2025年1月4日
    100
  • 解密:迅雷会员是如何实现高速下载的?

    迅雷凭借强大的下载能力、良好的使用体验以及丰富的服务,成为我们的常用软件,其推出的增值服务“迅雷会员”,也受到很多雷友的欢迎。但很多人估计都不知道,迅雷会员是如何实现高速下载的。今天,小编就跟大家科普一下。 传统下载方式与迅雷下载 传统的下…

    编程技术 2025年1月4日
    100
  • 总结5条对学习Linux系统有帮助的经验心得

    在学习Linux的开始阶段,我跟大家一样因为没有一点基础,学起来有点吃力,当对Linux有了一定的认知,你就会不断调整你的学习方式方法。并且在学习Linux的时候,记得放下您之前的思维,带着一个“无知”的学习态度去接触Linux,不妨是个很…

    编程技术 2025年1月4日
    100
  • 【SSL证书】HTTP被打压,HTTPS将逆袭

    近日,Firefox 52发布,Firefox 52中仍然坚持以往的态度,打压不安全的HTTP页面,而这次Mozilla带给用户的是HTTP的不安全登陆表单,在任何HTTP页面中,一个全新的“不安全密码警告”将会在用户点击表单时,直接出现在…

    编程技术 2025年1月4日
    100
  • 400余份阿里珍贵技术资料限时免费下载(持续更新中)

    2017年,你是否有一个小目标,打算在新的一年事业更上一层楼、代码写的更优美、对互联网生态拥有更多宏观的战略性了解? 小编精心挑选2016云栖大会、历届在线技术峰会、云栖技术直播核心资料,只把最好的呈现给你!因为资料集合过于庞大,所以分批放…

    编程技术 2025年1月4日
    100
  • DWG文件怎么打开 DWG文件查看器最新版下载

    DWG是我们常用的一种图纸格式,如今DWG文件广泛的应用于各个领域。DWG文件怎么打开?不少小伙伴可能刚接触DWG文件,因此不知道如何打开DWG文件。通过这篇文章,小编就来给大家介绍下简单的DWG文件打开方法以及DWG文件查看器最新版下载。…

    编程技术 2025年1月4日
    100
  • web技术栈中不可或缺的Linux技术

    随着第三次信息浪潮的冲击,web技术在近年来可谓发生了天翻地覆的变革。从单向信息的web1.0时代,逐步过渡到信息和人交互的web2.0再到数据主动与人*的web3.0时代,这些成就无疑归功于Web技术的迅速发展。 Web技术最重要的载体便…

    编程技术 2025年1月4日
    100

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信