网站首页 > 技术文章 正文
我是路程lucky,6年web前端开发经验,目前参与的项目技术栈主要是React,欢迎关注~
今天给大家分享一下解决一个遇到的样式布局问题经历,“标签宽度自适应,间距固定,每行指定个数”,看似简单,但新手朋友如果不注意很容易踩坑,下面我们就来逐步分析解决这个css布局小问题。
场景描述
工作中遇到这样一个需求场景:由于视觉设计师的视觉审美要求下,h5页面中,查询的商品列表每行有多个标签标签个数不固定,宽度自适应,左右间距固定。整体左右间距30px,标签之间间距6px,页面整体宽度640px(不同机型不同宽度)。
注:当前h5脚手架开发采用的scss,已集成了px2rem也就是像素转rem,编写px即可实现不同宽度的自适应。
初步思考
通常,由于移动端布局有一定兼容性等问题,一些特定的布局如display:grid等,我们还是谨慎使用。我们想到的第一想法是flex布局,可以使得宽度自适应,闪现的思路是:
- 父元素设置为display:flex,自动换行
- 子元素设置间距:距离上下左右,然后宽度就自适应,然后就好了?
// scss
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: 10px;
margin-right: 30px;
}
// 大致的想法
.child {
flex: 1;
margin: 10px 6px;
width: auto; // ?这个宽度如何处理
}
对于justify-content:space-between,期初也想使用这种,但需求要间距固定,无法适用。
问题来了
现实是残酷的,你会发现子元素全部在一排,没有宽度,也发现这里的最大难点就是如何确定标签宽度
- 如何实现一行三个
- 每行的三个标签第二个标签和第三个标签之间有间距,而第一个和左边相对页面左右边是没有间距的。
尝试解决
我们知道问题中使用flex布局的核心问题是要有最小宽度,没有宽度就不会撑开。css3的calc在移动h5中的兼容性还是不错的,我们可以动态计算宽度。根据每行显示3个,间距固定,那么我们可以得出以下计算公式:
子元素标签宽度 = ( 页面总宽度100% - 页面左右宽度30px * 2 - 标签左右边框2px * 3 - 边框左右间距6px * 2 ) / 3;
化简:
子元素标签宽度 = 100% / 3 - 30px * 2 / 3 - 2px * 3 / 3 - 6px * 2 / 3
= 100% / 3 - 26px
// 子元素宽度
.child {
width: calc(100% / 3 - 26px);
}
还是有问题,1行只能展示2个
这样布局,还是发现出现问题,虽然我们按照思路进行布局,但我们忽略了一个重点:标签的左右间距规律是:第1、4、7等最左侧第一个,也就是3n+1距离左侧是空的。第一时间,你会想通过伪类 nth-chilld(3n+1)来实现标签。但如果真这样做,这里对于h5页面来说,
- 误差大,这种间距稍不留神就会出现溢出换行
- 维护成本高,其他小伙伴维护需要注意这个伪类控制
我们换一种思路来考虑。其实这类场景PC端是很常见的,我们可以联动父元素来解决。
思路:
- 父元素宽度设置为100%加上一个间距的距离
- 父元素距离左侧减少一个间距的距离
优点:
- 间距可以抽出为变量,方便维护
- 误差小
最终方案
父元素flex布局,距离左侧为指定宽度,子元素宽度应该为正常的三个相同宽度和间距元素。
子元素标签宽度 = ( 页面总宽度100% - 页面左右宽度30px * 2 - 标签左右边框2px * 3 - 边框左右间距6px * 3 ) / 3;
化简:
子元素标签宽度 = 100% / 3 - 30px * 2 / 3 - 2px * 3 / 3 - 6px * 3 / 3
= 100% / 3 - 28px
// scss
$width: 6px;
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: (30px - $width);
margin-right: 30px;
width: calc(100% + $width);
}
// 大致的想法
.child {
flex: 1;
margin: 10px $width;
width: calc(100% / 3 - 30px * 2 / 3 - 2px * 3 / 3 - $width * 3 / 3)
// width: calc(100% / 3 - 28px);
}
总结
看似一个很容易很常见标签宽度自适应的布局样式问题,却引发了坑,各种思考,当然方案远不止这一种。我们可以通过实践经验总结出以下几点:
- 宽度自适应问题可以通过动态计算(当前主流浏览器基本都支持)
- 子节点的宽度问题可以去思考父元素是不是能够做一些改变实现
- 多思考,大胆实践,方法总比困难多,这样你才会摸索出更多的方法。
web前端开发岗位,一定要能够脑洞灵活,各种角度各种方法思考。我们才能游刃有余。谢谢大家。
我是路程lucky,6年web前端开发经验,目前参与的项目技术栈主要是React,欢迎关注~
猜你喜欢
- 2024-11-22 预加重、去加重和均衡
- 2024-11-22 建议收藏!总结了 42 种前端常用布局方案
- 2024-11-22 springboot开源系统-解决弹框拉伸高度无法自适应问题
- 2024-11-22 「干货」移动端Web页面适配
- 2024-11-22 自适应网站页面适配实现和基本原理讲解
- 2024-11-22 聊聊前端性能指标那些事儿
- 2024-11-22 深蓝S7——巡航控制——自适应巡航系统(ACC)2
- 2024-11-22 前端学习路径,细化分讲。加深新手对前端技术的认知
- 2024-11-22 好程序员web前端教程分享如何用CSS做响应式布局
- 2024-11-22 Web前端新手怎么入门 如何用CSS做响应式布局
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)