我很幸运，有6年的web前端开发经验。目前我参与的项目主要是React in技术栈。敬请关注~
今天给大家分享一个解决样式布局问题的经验，“标签宽度自适应，间距固定，指定每行数量”。看似简单，但新手朋友一不注意就容易踩坑。让我们一步步分析解决这个css布局问题。
场景描述
作品中有这样一个需求场景:由于视觉设计师的视觉审美要求，h5页面中查询的商品列表每一行都有多个标签。标签数量不固定，宽度自适应，左右间距固定。左右整体间距30px，标签间距6px，页面整体宽度***0px(不同型号宽度不同)。
注:h5脚手架开发使用的scss集成了px2rem，即像素转rem，通过编写px可以实现不同宽度的适配。
初步思考
通常由于移动布局的一些兼容性问题，一些特定的布局，比如display:grid等。，仍慎用。我们想到的第一个想法是flex layout，它可以使宽度自适应。闪现的想法是:
父元素设置为display:flex，自动换行子元素设置间距：距离上下左右，然后宽度就自适应，然后就好了？
// scss
//父元素
。父级{
显示器:flex
flex-wrap:缠绕；
左边距:10px
右边距:30px
}
//总体思路
。孩子{
flex:1；
边距:10px 6px
宽度:自动；// ?这个宽度呢？
}
对于
justify-content:space-between，我也想在期初用这个，但是由于需求的固定间距，不适用。
问题来了。
现实是残酷的。你会发现所有的子元素都是一排的，没有宽度。你也发现这里最大的难点是如何确定标签宽度。
如何实现一行三个每行的三个标签第二个标签和第三个标签之间有间距，而第一个和左边相对页面左右边是没有间距的。
尝试解决
我们知道问题中使用flex布局的核心问题是要有一个最小宽度，没有这个宽度就不会扩散。css3的calc在mobile h5的兼容性不错，我们可以动态计算宽度。根据每行显示的3，用固定的间距，那么我们可以得到下面的计算公式:
子标签宽度=(页面总宽度为100% –左右页宽30px * 2 & # 8211标签的左右边框2px * 3 & # 8211左右边框间距为6px * 2)/3；；
简化:
子标签宽度= 100%/3 –30px * 2/3 –2px * 3/3 –6px * 2 / 3
= 100% / 3 –26px
//子元素的宽度
。孩子{
宽度:calc(100%/3 –26px)；
}
还有一个问题。一行只能显示两个。
就这样，我们还是发现版面有问题。虽然我们按照思路布局，但是我们忽略了一个重要的点:标签的左右间距规则是:左边第一个，比如1、4、7，也就是3n+1是从左边空。第一次，您将希望通过伪类nth-chill (3n+1)来实现标记。但是如果你做了，这里是h5页面，
误差大，这种间距稍不留神就会出现溢出换行维护成本高，其他小伙伴维护需要注意这个伪类控制
我们换个方式想想。其实这种场景的PC端很常见，我们可以链接父元素来解决。
想法:
父元素宽度设置为100%加上一个间距的距离父元素距离左侧减少一个间距的距离
优势:
间距可以抽出为变量，方便维护误差小
最终计划
父元素的flex布局位于从左侧开始的指定宽度处，子元素的宽度应该是具有相同宽度和间距的正常三个元素。
子标签宽度=(页面总宽度为100% –左右页宽30px * 2 & # 8211标签的左右边框2px * 3 & # 8211左右边框间距为6px * 3)/3；；
简化:
子标签宽度= 100%/3 –30px * 2/3 –2px * 3/3 –6px * 3 / 3
= 100% / 3 –28px
// scss
$宽度:6px
//父元素
。父级{
显示器:flex
flex-wrap:缠绕；
左边距:(30px & # 8211$ width)；
右边距:30px
宽度:calc(100%+$ width)；
}
//总体思路
。孩子{
flex:1；
边距:10px $ width
宽度:calc(100%/3 –30px * 2/3 –2px * 3/3 –$宽度* 3 / 3)
//width:calc(100%/3 –28px)；
}
摘要
标签宽度自适应看似简单常见的布局样式问题，却引出了坑和各种想法。当然，方案远不止这一个。通过实践经验我们可以总结出以下几点:
宽度自适应问题可以通过动态计算（当前主流浏览器基本都支持）子节点的宽度问题可以去思考父元素是不是能够做一些改变实现多思考，大胆实践，方法总比困难多，这样你才会摸索出更多的方法。
前端web开发岗位必须能从多种角度和方法灵活思考。这样我们才能安心。谢谢大家。
我很幸运，有6年的web前端开发经验。目前我参与的项目主要是React in技术栈。敬请关注~
本文来自尔岚投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/528595.html
微信扫一扫 
