我是路程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页面来说 ，
推荐阅读
- 华为手机验证码自动填写怎么设置 华为手机验证码自动填写设置的方法
- 被自家狗咬了怎么处理 有什么解决的办法
- 催收短信 网贷短信链接短信来自哪里
- 自制美白减肥的食谱介绍 自制美白减肥的食谱介绍有什么
- 致自己人生感言 有关人生的感悟介绍
- 自制青梅酒的危害 自制青梅酒的危害有哪些
- 自然堂各种系列价格介绍 自然堂套装价格
- word文档怎么自动生成目录章节
- 梦见喜欢自己的人代表什么 梦见喜欢自己的人好不好呢
- 运筹帷幄之中决胜千里之外是谁说的 运筹帷幄之中决胜千里之外出自谁的作品