位置: 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)

  • 杭州公交怎么用手机支付(杭州公交怎么用手机支付微信)

    杭州公交怎么用手机支付(杭州公交怎么用手机支付微信)

  • 咸鱼里面的曝光是什么意思(咸鱼里面曝光啥意思)

    咸鱼里面的曝光是什么意思(咸鱼里面曝光啥意思)

  • 苹果手机电话不在桌面(苹果手机电话不响铃什么原因)

    苹果手机电话不在桌面(苹果手机电话不响铃什么原因)

  • 华硕主板开机卡在logo界面(华硕主板开机卡在bios界面)

    华硕主板开机卡在logo界面(华硕主板开机卡在bios界面)

  • 下载什么软件可以看电视频道(下载什么软件可以把试卷答案p掉)

    下载什么软件可以看电视频道(下载什么软件可以把试卷答案p掉)

  • 录屏怎么关闭不了(录完屏怎么关闭)

    录屏怎么关闭不了(录完屏怎么关闭)

  • 华为mate30pro热点在哪里(华为mate30Pro热点怎么设置一人)

    华为mate30pro热点在哪里(华为mate30Pro热点怎么设置一人)

  • 拼多多订单待确认是什么意思(拼多多订单待确认要多久)

    拼多多订单待确认是什么意思(拼多多订单待确认要多久)

  • iphonexsmax死机了怎么重启(iphonexsmax 死机)

    iphonexsmax死机了怎么重启(iphonexsmax 死机)

  • 手机音量突然变小了怎么办(手机音量突然变成通话音量)

    手机音量突然变小了怎么办(手机音量突然变成通话音量)

  • qq群课堂视频生成要多久(qq群课堂播放视频的格式)

    qq群课堂视频生成要多久(qq群课堂播放视频的格式)

  • 荣耀v20怎么设置虚拟按键(荣耀v20怎么设置才能读取u盘)

    荣耀v20怎么设置虚拟按键(荣耀v20怎么设置才能读取u盘)

  • 无线路由器连接不上是什么原因(无线路由器连接无线路由器)

    无线路由器连接不上是什么原因(无线路由器连接无线路由器)

  • 为什么微信授权失败(为什么微信授权会出现个陌生的微信号)

    为什么微信授权失败(为什么微信授权会出现个陌生的微信号)

  • 苹果的云盘是开还是关(苹果云盘什么用)

    苹果的云盘是开还是关(苹果云盘什么用)

  • 手机网络正常却不能用(手机网络正常却打不开B站)

    手机网络正常却不能用(手机网络正常却打不开B站)

  • 华为充满电怎么还有闪电标志(华为充电充满)

    华为充满电怎么还有闪电标志(华为充电充满)

  • ios13占用多少内存(ios13.3占用多少内存)

    ios13占用多少内存(ios13.3占用多少内存)

  • 苹果x信息特效叫什么(苹果x信息特效怎么设置)

    苹果x信息特效叫什么(苹果x信息特效怎么设置)

  • 淘宝小二在哪(淘宝的小二在哪里)

    淘宝小二在哪(淘宝的小二在哪里)

  • 土壤污染原因有哪些(土壤受污染的现象及原因)

    土壤污染原因有哪些(土壤受污染的现象及原因)

  • 湖南青马在线平台入口(湖南青马在线网址是什么)

    湖南青马在线平台入口(湖南青马在线网址是什么)

  • 简述mapreduce工作原理(简述mapreduce的主要功能)

    简述mapreduce工作原理(简述mapreduce的主要功能)

  • 蓝牙音箱连不上手机(蓝牙音箱连不上电脑)

    蓝牙音箱连不上手机(蓝牙音箱连不上电脑)

  • taskhost.exe是什么进程? taskhost.exe占用cpu的解决办法(taskhost window)

    taskhost.exe是什么进程? taskhost.exe占用cpu的解决办法(taskhost window)

  • smbtree命令  基于文本的SMB网络浏览器工具(smitty命令用法)

    smbtree命令 基于文本的SMB网络浏览器工具(smitty命令用法)

  • 税务ukey与税控盘的区别
  • 应交增值税和未交增值税都有余额
  • 小规模纳税人取得增值税
  • 保障性住房土地增值税预征
  • 企业重组的特殊性税务处理比例
  • 契税是什么税,怎么算的
  • 业务招待费和广告费扣除标准
  • 开具电费发票如何入账?
  • 房地产公司属于第几产业
  • 财务报表可以补充分类吗
  • 30万的车税可以抵多少
  • 作废冲红的发票怎么做账处理
  • 无法确定购买日期
  • 工程结余物资清理方案
  • 交印花税需要身份证吗
  • 营业收入少入0.02怎么办
  • 成本未取得发票
  • 租地协调费没发票怎么入账?
  • 制造费用的
  • 机构信用代码证是三证合一里的吗
  • 增值税专票盖章正确位置
  • 企业缴纳印花税会计分录
  • 收到投资款现金流量项目是什么
  • 以前年度记账错误
  • 小规模零申报资产负债表报错了要交印花税吗
  • mac连不上wifi怎么回事 其他设备却可以
  • node.js和npm
  • 跨年度暂估成本
  • win10分辨率调整
  • 前期做了无票收入,后期怎么填写
  • 年终奖一般发什么奖品
  • PHP:file_put_contents()的用法_Filesystem函数
  • 为什么要把收入当成舞弊假定
  • 小微企业应纳税所得额300万所得税
  • vericut9.0环境变量
  • 跨年度退货
  • 内资企业
  • unistack怎么关掉
  • 代发工资一般收多少服务费
  • opengl环境光参数
  • 工资和五险一金在公司发,个税在子公司扣
  • mongodb查询字段不存在
  • 投资公司投资收益要交增值税吗
  • 关联企业债资比怎么计算
  • 公允价值变动损益在利润表哪里
  • 递延所得税资产和负债账务处理
  • 不动产租赁开票税率
  • 个人独资企业与有限公司的区别
  • 营利性与非营利性的关系
  • 车辆通行费
  • 预付工程款会计分录
  • 经营租赁的房屋计提折旧吗
  • 2020发票丢失新规
  • 投资收益科目在利润表中怎么填
  • 工程完工结算报告范本
  • 出纳账户怎么设置
  • 商业企业注销应检查哪方面的问题
  • windows ip地址在哪里设置
  • win8系统蓝屏后无法修复
  • windows xp系
  • xp ie浏览器无法显示网页
  • ubuntu禁用服务命令
  • centos coreos
  • windows route metric
  • win8安装出现了一些问题
  • 如何解决windows不是正版的问题
  • Linux使用scp命令进行文件远程的上传或下载
  • cocos-creator
  • element拖拽
  • 使用jquery实现的项目
  • linux中的命令及含义
  • 详解Bootstrap四种图片样式
  • JavaScript italics方法入门实例(把字符串显示为斜体)
  • textview在哪
  • 税收和社保不在同一地缴纳怎么办
  • 芜湖市房产退契税是什么政策
  • 什么是核心征管申报
  • 核定征收的适用税率
  • 简述纳税人与负税的区别
  • 工信部摩托车目录查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设