scss⾃适应_看似简单的css宽度⾃适应，间距固定踩坑记我是路程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; // ?这个宽度如何处理
}css布局左边固定右边自适应
对于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，欢迎关注~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。