位置: IT常识 - 正文

CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)(css flaot)

编辑:rootadmin
CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目) 前言

推荐整理分享CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)(css flaot),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css.,css小技巧,css.,css effect,css主要解决什么问题,css中常见问题及解决办法,css中常见问题及解决办法,css中常见问题及解决办法,内容如对您有帮助,希望把文章链接给更多的朋友!

关于 flex 布局下 justify-content: xx,很多朋友都想让其换行后,靠左进行依次排列(默认会平均分布居中)。

本文实现了 纯 CSS (无任何 JS),实现 flex / justify-content 弹性布局下,断行后让元素始终靠左排序,

CSS - 完美解决 flex 布局下,一行显示固定个数(平均分布)并且强制换行,超出后 “靠左“ 对其(详细解决方案,适用于 Web、Vue、React 等任何前端项目)(css flaot)

你可以一键复制示例,然后稍微改改样式就能使用。

如下图所示,该示例是一行显示 3 个(可自定义),宽度变化时保持 “平均分布”,超出部分 “居左” ,

并且,还可以随意设置各元素之间的 “间隙”,具体详见代码。

示例代码

推荐使用一键复制功能,避免漏选。

随便新建一个 *.html 复制后直接运行,按照需求进行更改调试即可。

<body> <section class="content"> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <div class="item">元素</div> <!-- <div class="item">元素</div> --> </section></body><style>.content { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;/* 替代space-between布局方式 */}.item { flex: 1; height: 120px; background-color: #cacaca; /* 间隙为5px */ margin: 0 5px 5px 0; /* END */ /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */ width: calc((100% - 10px) / 3); /* END */ /* 加入这两个后每个item的宽度就生效了 */ min-width: calc((100% - 10px) / 3); max-width: calc((100% - 10px) / 3); /* END */}.item:nth-child(3n) { /* 去除第3n个的margin-right */ margin-right: 0;}</style>

具体请看代码注释,多做修改调试达到您想要的效果。

本文链接地址:https://www.jiuchutong.com/zhishi/288766.html 转载请保留说明!

上一篇:安大略省的圣诞树农场,加拿大 (© FatCamera/Getty Images Plus)(安大略省节日)

下一篇:蒂内河畔圣艾蒂安小镇,法国阿尔卑斯省 (© CAVALIER Michel/hemis.fr/Alamy Stock Photo)

  • 小米手机怎么查保修期(小米手机怎么查看激活日期)

    小米手机怎么查保修期(小米手机怎么查看激活日期)

  • 4g流量开5g会扣钱吗(4g流量开5g会怎么样)

    4g流量开5g会扣钱吗(4g流量开5g会怎么样)

  • 爱奇艺可以几个人共用一个账号(爱奇艺可以几个设备登录)

    爱奇艺可以几个人共用一个账号(爱奇艺可以几个设备登录)

  • win10睡眠和休眠的区别(win10睡眠和休眠哪个接近手机待机)

    win10睡眠和休眠的区别(win10睡眠和休眠哪个接近手机待机)

  • flash的源文件格式是什么(flash的源文件扩展名)

    flash的源文件格式是什么(flash的源文件扩展名)

  • 手机备忘录怎么导出(手机备忘录怎么使用)

    手机备忘录怎么导出(手机备忘录怎么使用)

  • qq扩列一直失败怎么解决(qq扩列失败了)

    qq扩列一直失败怎么解决(qq扩列失败了)

  • 微信健康码上的信息怎样可以删除(微信健康码上的小眼睛不见了)

    微信健康码上的信息怎样可以删除(微信健康码上的小眼睛不见了)

  • oppo手机关机闹钟会响吗(oppo手机关机闹钟响会自动开机吗)

    oppo手机关机闹钟会响吗(oppo手机关机闹钟响会自动开机吗)

  • 钉钉上面投屏到电视上算不算时间(把钉钉投屏到电视)

    钉钉上面投屏到电视上算不算时间(把钉钉投屏到电视)

  • 手机发热与电池老化有关系吗(手机发热电池消耗快是什么原因)

    手机发热与电池老化有关系吗(手机发热电池消耗快是什么原因)

  • 不符合dou+投放规范的视频需要删除吗(不符合dou+投放规范是被限流了吗)

    不符合dou+投放规范的视频需要删除吗(不符合dou+投放规范是被限流了吗)

  • 华为nova7的卡槽在哪(华为nova7的卡槽怎么打开)

    华为nova7的卡槽在哪(华为nova7的卡槽怎么打开)

  • 苹果手机的安全中心在哪里(苹果手机的安全性高吗)

    苹果手机的安全中心在哪里(苹果手机的安全性高吗)

  • 苹果11来电话声音变小(苹果11来电话声音小怎么解决)

    苹果11来电话声音变小(苹果11来电话声音小怎么解决)

  • a2133是mini几(ipad迷你a2133和a2125什么区别吗?)

    a2133是mini几(ipad迷你a2133和a2125什么区别吗?)

  • 转转怎么解绑实名认证(转转怎么解绑实名认证信息)

    转转怎么解绑实名认证(转转怎么解绑实名认证信息)

  • 三星手机截屏快捷键(三星手机截屏快速分享)

    三星手机截屏快捷键(三星手机截屏快速分享)

  • 快狗打车如何申请发票(快狗打车怎么注册司机,需要什么条件)

    快狗打车如何申请发票(快狗打车怎么注册司机,需要什么条件)

  • vivoiqooneo支不支持nfc(vivoiqooneo支不支持无线充电)

    vivoiqooneo支不支持nfc(vivoiqooneo支不支持无线充电)

  • 华为9x支持nfc吗(华为9X支持nfc吗)

    华为9x支持nfc吗(华为9X支持nfc吗)

  • 华为nova发热严重吗(华为nova发热严重是什么原因)

    华为nova发热严重吗(华为nova发热严重是什么原因)

  • 苹果通知栏怎么自定义(苹果通知栏怎么突然打不开了)

    苹果通知栏怎么自定义(苹果通知栏怎么突然打不开了)

  • 腾讯视频登陆超时(腾讯视频登陆超时怎么办)

    腾讯视频登陆超时(腾讯视频登陆超时怎么办)

  • phpcms安装失败怎么办(php安装不上)

    phpcms安装失败怎么办(php安装不上)

  • 缴纳汇算清缴所得税怎么做账
  • 存货核算的内容是什么
  • 更正以前年度费用账务处理
  • 金税四期会计人员如何提升自己
  • 企业购进材料入什么账户
  • 科研材料怎么买
  • 退货开具红字发票销项税为负数税务局会查吗
  • 外国人在中国工作签证
  • 个体户不足征是否要交房产税
  • 进出口企业必须有报检资质吗
  • 增值税期末留抵退税政策实施力度
  • 销售开红字的账务处理
  • 加油站的成品油许可证变更过后有什么风险
  • 其他货币资金是资产类科目吗
  • 月末计算各种税费表格模版
  • 利润表的企业所得税怎么查询
  • 增值税专用发票开错了咋办
  • 发票入账后查出金额错误
  • 案例分析:如何缓解幼儿在幼儿园的焦虑情绪
  • 租赁收入账务处理
  • 退票费报销凭证可以在机子上打印吗
  • 应付票据属于什么类账户
  • 收到财产保险赔款会计分录
  • 计提个人保险会计分录
  • 工程物资期末余额应在资产负债表中填列?
  • 汇兑损益 纳税调整
  • 冲销货款的会计分录
  • 实物资产股权投资包括
  • falogincn修改无线密码
  • linux中!
  • 公司支付的赔偿金要扣税吗
  • 预收外汇如何结汇
  • php中strtotime
  • 二手固定资产怎么折旧
  • 冰山从哪里来
  • php中的九大缓存技术
  • 债务重组收入属于什么科目
  • 微信小程序开发一个多少钱
  • elemental ui
  • 旅行社差额纳税的规定
  • 人防车库成本能抵扣吗
  • 研发费用计入营业利润吗
  • mysql的联合查询
  • mysqldump导入数据库
  • discuz管理中心登陆
  • 资本成本在财务报表中怎么体现
  • 电子发票开错了应该怎么办?
  • 外购商品发放给员工 进项税额能不能抵扣
  • 小规模纳税人季报需要报什么
  • 主营业务收入明细科目
  • 非独立核算增值税汇总缴纳吗
  • 收回应收账款赊账怎么算
  • 补充登记法的操作步骤
  • 存货 跌价
  • 固定资产抵债交不交增值税
  • 查账征收的含义
  • 新注册企业实收资本没到账怎么处理
  • 印花税减免退回会计分录
  • 应付利润科目
  • 租办公楼有什么讲究
  • 商业企业包装物包括哪些
  • linux重置开机密码
  • freebsd怎么安装软件
  • ubuntu网卡命令
  • enterasys
  • Linux下使用quota命令管理磁盘空间的实例教程
  • apache2 rewrite
  • linux软件少
  • linux sh
  • unity alembic
  • javascript数学
  • 获取本地ip地址失败
  • 使用vue-cli快速搭建vue项目
  • shell中for循环如何用sed
  • js修改css文件
  • 每天一篇经济学人
  • python中计数函数怎么用
  • 广西电子税务局怎么报税
  • 山西省网上营业执照申请官网?
  • 环保税申报操作手册
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设